悬停图像时的悬停效果

Question

我想制作悬停效果，当悬停图像时，如下所示： 在网上找到了很多类似的例子，但都是用jquery或js。我想知道是否可以纯粹用css来做...

更新：这是找到的代码，但它太大了:(

.view-content {
	height: 330px;
}
h2.view-title {
    font-size: 3rem;
    font-weight: bold;
    color: #7d7a7a;
    text-align: center;
    text-shadow: 0 0px 0px;
}
.view {
   width: 300px;
   height: 200px;
   margin: 10px;
   float: left;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
}

.view .view-mask, .view {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

.view img {
   display: block;
   position: relative;
}

.view a.view-info {
   display: inline-block;
   text-decoration: none;
   padding:0;
   text-align: center;
   color: white;
   font-size: 1.9rem;
   font-weight: 600;
   vertical-align: middle;
}
.view-effect .view-mask {
   opacity: 0;
   overflow:visible;
   border:100px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.3s ease-in-out;
}

.view-effect a.view-info {
   position:relative;
   top:-20px;
   opacity: 0;
   transition: opacity 0.3s 0s ease-in-out;
}

.view-effect:hover .view-mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
}

.view-effect:hover a.view-info {
   opacity:1;
   transition-delay: 0.3s;
}

<div class="view view-effect">
				<img src="http://storage7.static.itmages.ru/i/16/0708/h_1467979220_8325708_d41d8cd98f.png" height="200" width="300" alt="">  <p></p>
<div class="view-mask">
					<a href="#" class="view-info">Show project</a>
				</div>
</div>

Answer 1

查看以下代码作为您想要的内容，或者只需单击以下链接：-

https://jsfiddle.net/ananddeepsingh/99bop25r/

HTML

<div class="box"> <img src="http://placehold.it/400x300">
    <div class="overbox">
        <div class="title overtext"> CSS Script </div>
        <div class="tagline overtext"> Animated Text Overlay On Hover </div>
    </div>
</div>

CSS

.box {
        cursor: pointer;
        height: 300px;
        position: relative;
        overflow: hidden;
        width: 400px;
    }

    .box img {
        position: absolute;
        left: 0;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
    }

    .box .overbox {
        background-color: #304562;
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        z-index: 100;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
        opacity: 0;
        width: 360px;
        height: 240px;
        padding: 130px 20px;
    }

    .box:hover .overbox {
        opacity: 1;
    }

    .box .overtext {
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
        transform: translateY(40px);
        -webkit-transform: translateY(40px);
    }

    .box .title {
        font-size: 2.5em;
        text-transform: uppercase;
        opacity: 0;
        transition-delay: 0.1s;
        transition-duration: 0.2s;
    }

    .box:hover .title,
    .box:focus .title {
        opacity: 1;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }

    .box .tagline {
        font-size: 0.8em;
        opacity: 0;
        transition-delay: 0.2s;
        transition-duration: 0.2s;
    }

    .box:hover .tagline,
    .box:focus .tagline {
        opacity: 1;
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
    }

Answer 2

是的，您可以使用纯 CSS 来做到这一点。为此，您可以使用 :after 伪类作为，

.img-wrapper {
	position:relative;
	display:inline-block;
  overflow:hidden;
  cursor:pointer
}	

.img-wrapper .hover-div{
    position:absolute;
    left:0; 
	  top:0;
    width:100%; 
	  height:100%;
    opacity:0;
	  display:inline-block;
    text-align:center;
    background:rgba(0,0,0,0.3);
    -webkit-transition: 0.5s ease-in-out;
       -moz-transition: 0.5s ease-in-out;
         -o-transition: 0.5s ease-in-out;
            transition: 0.5s ease-in-out;
    -webkit-transform: translateY(100%);
       -moz-transform: translateY(100%);
         -o-transform: translateY(100%);
        -ms-transform: translateY(100%);
            transform: translateY(100%);
}

.img-wrapper:hover .hover-div{
    top:0;
	  opacity:1;
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
         -o-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }

.img-wrapper:hover img {
	  -webkit-filter:grayscale(1);
       -moz-filter:grayscale(1);
            filter:grayscale(1);
}

.mybutton{
  background:#FFFFFF;
  color:#111111;
  padding:10px 20px;
  border-radius:5px;
  display:inline-block;
  margin-top:100px;
  -webkit-transition: 0.3s ease-in-out;
          transition: 0.3s ease-in-out;
}
.mybutton:hover{
  background:#111111;
  color:#FFFFFF;
}

<div class="img-wrapper">
  <img src="https://unsplash.it/200" >
  <div class="hover-div">
    <a class="mybutton">My Button</a>
  </div>
</div>

Answer 3

只需在要显示效果的元素后面使用“:hover”即可。例如，如果您想在标题上使用它，您将创建一个名为

的新CSS标签

header:hover{} 然后您可以设置大约 0.5 的 opactiy 以使对象在悬停时淡出。希望这有帮助！

Answer 4

是的，只能通过 HTML 和 CSS 实现。下面是示例代码：

HTML：

<div class="imagebox">
    <div class="transparent"><i class="fa fa-search" aria-hidden="true"></i>
    <p>Zoom</p></div>
    <img src="images/yourimage.jpg">
</div>

CSS：

.imagebox{
  position: relative;
}

.imagebox:hover .transparent{
  display: block;
}

.transparent{
  background: rgba(0,0,0,0.5);
  position: absolute;
  height: 100%;
  width: 100%;
  display: none;
  cursor: pointer;
 }

.transparent i{
  position: absolute;
  left: 50%;
  top: 30%;
  color: #fff;
  font-size: 20px;
}

.transparent p{
  position: absolute;
  left: 45%;
  top: 50%;
  color: #fff;
  font-size: 20px;
 }