Hover effect when hover image

I want to make a hover effect, when hover the image like this: enter image description here 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>

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

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

Hover effect when hover image

Solution 1:

Solution 2:

Related

Recent Posts