Hover effect when hover image - html

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">
Show project
</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;
}