How to blur an image by showing text over it (hover) in css
So good. I have a problem.
I wanted to have an image that is blurry on hover and at the same time render text over it.
I found an easy way to blur the image and display the text, but not at the same time; in fact combining the two codes together results in the image not being blurred at all. I think this is because the text does cover the image and the browser doesn't get the message that the image is hovered.
Here is an image with text above it and here is an image with blur on hover How can I solve this problem? I'm scared and I think I have found another way to do this, but this is a bit cumbersome.
Here's some code:
h1,p {
margin: 0;
padding: 0;
}
.imgtext {
color: white;
background: rgba(0,0,0,0.89);
width: 155px;
height: 135px;
padding: 50px 15px 0 15px;
opacity: 0;
position: absolute;
bottom: 0px;
-webkit-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.pic {
position: relative;
overflow: hidden;
width: 185px;
height: 185px;
margin: 50px auto;
}
.pic img:hover{
-webkit-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
transform: scale(1.03);
}
.imgtext:hover {
-webkit-opacity: 100;
opacity: 100;
}
<div class="pic">
<img src="http://nicolacornolti.com/photos/film/img/1.png">
<span class="imgtext">
<h1>THIS IS A TITLE</h1>
<p>and this is a description</p>
</span>
source to share
Use the pseudo-class class :hover
on the container element .pic
, not on each individual child element.
For example:
.pic .imgtext:hover
before .pic:hover .imgtext
and
.pic img:hover
before .pic:hover img
h1,
p {
margin: 0;
padding: 0;
}
.imgtext {
color: white;
background: rgba(0, 0, 0, 0.89);
width: 155px;
height: 135px;
padding: 50px 15px 0 15px;
opacity: 0;
position: absolute;
bottom: 0px;
-webkit-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.pic {
position: relative;
overflow: hidden;
width: 185px;
height: 185px;
margin: 50px auto;
}
.pic:hover img {
-webkit-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
transform: scale(1.03);
}
.pic:hover .imgtext {
-webkit-opacity: 1;
opacity: 1;
}
<div class="pic">
<img src="http://nicolacornolti.com/photos/film/img/1.png">
<span class="imgtext">
<h1>THIS IS A TITLE</h1>
<p>and this is a description</p>
</span>
</div>
source to share
First of all, your text pass was missing the position setting left
I added ( 0
). Also, I've changed the selectors for the hover state so that the image and text settings change when their parent .pic
hovers:
h1,
p {
margin: 0;
padding: 0;
}
.imgtext {
color: white;
width: 155px;
height: 135px;
padding: 50px 15px 0 15px;
opacity: 0;
position: absolute;
bottom: 0px;
left: 0;
-webkit-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.pic {
position: relative;
overflow: hidden;
width: 185px;
height: 185px;
margin: 50px auto;
}
.pic:hover img {
-webkit-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
transform: scale(1.03);
}
.pic:hover .imgtext {
-webkit-opacity: 1;
opacity: 1;
}
<div class="pic">
<img src="http://nicolacornolti.com/photos/film/img/1.png">
<span class="imgtext">
<h1>THIS IS A TITLE</h1>
<p>and this is a description</p>
</span>
</div>
source to share
https://codepen.io/DannaB67/pen/JJJQqX
h1,p {
margin: 0;
padding: 0;
}
.imgtext {
color: white;
background: rgba(0,0,0,0.6);
width: 155px;
height: 135px;
padding: 50px 15px 0 15px;
opacity: 0;
position: absolute;
bottom: 0px;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.pic {
position: relative;
overflow: hidden;
width: 185px;
height: 185px;
margin: 50px auto;
}
.pic:hover img {
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
-o-filter: blur(2px);
filter: blur(2px);
transform: scale(1.08);
}
.imgtext:hover {
-webkit-opacity: 40;
opacity: 40;
}
<div class="pic">
<img src="http://nicolacornolti.com/photos/film/img/1.png">
<span class="imgtext">
<h1>THIS IS A TITLE</h1>
<p>and this is a description</p>
</span>
</div>
source to share