Image with on-hover caption

image-with-on-hover-caption.markdown

Image with on-hover caption

A Pen by ahimsauzi on CodePen.

License.

index.html

<div class="views-field views-field-nothing">        <span class="field-content"><div class="tnsss-grid">
<div class="thumbnail"><a>
<div class="caption"><div class="caption-inner">
  <div class="field-tnsss-quote field-wrapper">
    <p>“Excepteur voluptate 90's blog dolore exercitation biodiesel pop-up. Semiotics gastropub nesciunt, prism lumbersexual tumblr offal.”</p>
<div class="signature">
<p>Natalie Morales,Ennui coloring book mlkshk</p>
</div>
<p> </p>
  </div>
</div>
</div>

  <div class="field-tnsss-image field-wrapper">
    <img typeof="foaf:Image" src=" http://placehold.it/296/d83f20/ffffff" width="296" height="307" alt="" />  </div>

    </a></div>
</div></span>  </div>

script.js

$(document).ready(function () {
  $(".cv-row").mouseenter(function() {
          $(".views-field-nothing", this).addClass("show");
      }).mouseleave(function() {
          $(".views-field-nothing", this).removeClass("show");
      });
 });
	$(function() {
			$('.thumbnail').hover(
					function(){
							$(this).find('.caption').fadeIn(250); 
					},
					function(){
							$(this).find('.caption').fadeOut(250);
					}
			);
	})

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

.tnsss-grid {
	text-align: center;
}
.thumbnail {
		position:relative;
		overflow:hidden;
		padding: 0;
		border-radius: 0;
		box-sizing: border-box;
		border: none;
		display: inline-block;
		margin-left: auto;
		margin-right: auto;
		float: none;
		
}
.caption {
		position:absolute;
		box-sizing: border-box;
		top:0;
		left:0;
		background:rgba(213, 195, 187, 0.70);
		width:296px;
		height:307px;
		display: none;
		text-align: center;
		color:#fff !important;
		z-index:2;
		.caption-inner {
			display: table;
			.field-tnsss-quote {
				padding-top: 12%;
				width: 280px;
				height: 307px;
				margin: 0 auto;
				vertical-align: middle;
				display: table-cell;
				p {
					text-transform: uppercase;
					font-size: rem-calc(16);
					line-height: rem-calc(19);
					margin-bottom: rem-calc(6);
					text-align: left;
					vertical-align: middle;
					padding: 0 rem-calc(5) 0 rem-calc(19);
				}
				.signature {
					vertical-align: middle;
					display: table-row;
					p{
						font-size: rem-calc(16);
						line-height: rem-calc(19);
					}
				}
			}
		}
}