懸停效果當懸停圖像

Question

我想做一個懸停效果，當像這樣懸停圖像： 在互聯網上發現許多類似的例子，但他們都與jQuery或JS。我想知道是否有可能與純粹的CSS做...

UPDATE：這裏發現了一個代碼，但它是太大:(

.view-content { 
 
\t 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"> 
 
\t \t \t \t <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"> 
 
\t \t \t \t \t <a href="#" class="view-info">Show project</a> 
 
\t \t \t \t </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

只需在要顯示效果的元素後面使用'：hover'即可。例如，如果您想在標題上使用它，您可以創建一個名爲

header：hover {} an那麼你可以放一個0.5的透明度來讓對象在懸停時消失。希望這可以幫助！

Answer 3

是的，你可以使用純CSS做到這一點。爲此目的可能使用：後僞類的，

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

 
.img-wrapper .hover-div{ 
 
    position:absolute; 
 
    left:0; 
 
\t top:0; 
 
    width:100%; 
 
\t height:100%; 
 
    opacity:0; 
 
\t 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; 
 
\t 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 { 
 
\t -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 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; 
}