Hover effect when hover image

Question

I want to make a hover effect, when hover the image like this: On the Internet found many similar examples but they all either with jquery or js. I would like to know whether it is possible to do purely with css...

UPDATE: here's a code found, but it is too big :(

 .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

Checkout below code as what you want or just click on below link :-

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

Yes you can do that using pure CSS. for that purpose you may use :after pseudo class as,

 .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

Just use ':hover' after the element you want to show the effect on. For example, if you wanted to use it on the header you would create a new css tag called

header:hover{} and then you could put an opactiy of maybe 0.5 to make the object fade on hover. Hope this helps!

Answer 4

Yes it is possible only through HTML and CSS. Below there is an example code:

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