Show/Hide Image Caption on hover

Question

Building a portfolio page with images and trying to use jquery to make the caption show and slide up on hover but then, when i tried, it didn't work with my code. The code is shown below plus a snippet that can also be run.

Here's a Snippet

$('.port-img').hover(function() {
  if ($(".caption").is('hidden')) {
    $(this).show('slideUp', 'slow');
    $(this).hide('slideDown', 'slow');
  };
});

.caption {
  width: 400px;
  height: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  background: #000;
  color: #fff;
  z-index: 2;
  transition: all .5s;
  visibility: hidden;
}

.image {
  width: 400px;
  height: 400px;
  z-index: 1;
  transition: all .5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-3 col-sm-6 col-xs-12 section-1-port filter logo">
  <div class="port-img image">
    <a href=""><img class="img-responsive" src="http://via.placeholder.com/300x300" alt="Bams Nigeria Enterprise" /></a>
  </div>
  <div class="caption img-caption">
    <h3>Logo Design, Photoshop</h3>
  </div>
</div>

Answer 1

Please have a look at snippet.

$('.port-img').hover(function(){
  var $caption = $(".caption");
  if ($caption.is(':hidden')){
    $caption.slideDown('slow');
  } else {
    $caption.slideUp('slow');
  }
});

.caption {
  width: 400px;
  height: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  background: #000;
  color: #fff;
  z-index: 2;
  transition: all .5s;
  display: none; /* default hide */
}



.image {
  width: 400px;
  height: 400px;
  z-index: 1;
  transition: all .5s;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="col-md-3 col-sm-6 col-xs-12 section-1-port filter logo">
		<div class="port-img image">
			<a href=""><img class="img-responsive" src="http://via.placeholder.com/300x300" alt="Bams Nigeria Enterprise" /></a>
		</div>
		<div class="caption img-caption">
			<h3>Logo Design, Photoshop</h3>
		</div>
	</div>

Answer 2

You can do it with alternative way, using CSS only :

.caption-style-2{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	
}

.caption-style-2 li{
	float: left;
	padding: 0px;
	position: relative;
	overflow: hidden;
}

.caption-style-2 li:hover .caption{
	opacity: 1;
	transform: translateY(-100px);
	-webkit-transform:translateY(-100px);
	-moz-transform:translateY(-100px);
	-ms-transform:translateY(-100px);
	-o-transform:translateY(-100px);

}


.caption-style-2 img{
	margin: 0px;
	padding: 0px;
	float: left;
	z-index: 4;
}


.caption-style-2 .caption{
	cursor: pointer;
	position: absolute;
	opacity: 0;
	top:300px;
	-webkit-transition:all 0.15s ease-in-out;
	-moz-transition:all 0.15s ease-in-out;
	-o-transition:all 0.15s ease-in-out;
	-ms-transition:all 0.15s ease-in-out;
	transition:all 0.15s ease-in-out;

}
.caption-style-2 .blur{
	background-color: rgba(0,0,0,0.7);
	height: 300px;
	width: 400px;
	z-index: 5;
	position: absolute;
}

.caption-style-2 .caption-text h1{
	text-transform: uppercase;
	font-size: 18px;
}
.caption-style-2 .caption-text{
	z-index: 10;
	color: #fff;
	position: absolute;
	width: 300px;
	height: 300px;
	text-align: center;
	top:20px;
}

<ul class="caption-style-2">
	<li>
		<img src="http://via.placeholder.com/300x300" alt="">
		<div class="caption">
			<div class="blur"></div>
			<div class="caption-text">
				<h1>Amazing Caption</h1>
				<p>Whatever It Is - Always Awesome</p>
			</div>
		</div>
	</li>
</ul>

Answer 3

$('.port-img').hover(function(){
	$(".caption").show('slideUp');
	$(".caption").hide('slideDown');
});

.caption {
  width: 400px;
  height: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  background: #000;
  color: #fff;
  z-index: 2;
  transition: all .5s;
  display: none;
}



.image {
  width: 400px;
  height: 400px;
  z-index: 1;
  transition: all .5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="col-md-3 col-sm-6 col-xs-12 section-1-port filter logo">
		<div class="port-img image">
			<a href=""><img class="img-responsive" src="http://via.placeholder.com/300x300" alt="Bams Nigeria Enterprise" /></a>
		</div>
		<div class="caption img-caption">
			<h3>Logo Design, Photoshop</h3>
		</div>
	</div>

$(this) means $('.port-img') not ('.caption')