悬停时显示/隐藏图像标题

Question

使用图片构建一个投资组合页面并尝试使用jquery使标题显示并在悬停时向上滑动但是，当我尝试时，它不能与我的代码一起使用。代码如下所示，还有一个也可以运行的代码段。

这是一个片段

$('.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

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

$(this)表示$('.port-img')不是('.caption')

Answer 2

您可以使用其他方式，仅使用CSS：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

请查看代码段。

$('.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>