[英]Hover effect when hover image
我想做一个悬停效果,当悬停图像是这样的: 在Internet上找到了许多类似的示例,但它们都使用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>
根据您的需要签出以下代码,或单击下面的链接:-
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);
}
是的,您可以使用纯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>
只需在要显示效果的元素后面使用“:hover”即可。 例如,如果您想在标头上使用它,则可以创建一个名为
是的,只有通过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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.