blur photo caption ,blur photo caption Instagram ,best caption for blur photo
I have a problem.
I wanted to have a picture that blurred on hover, and at the same time making text appear over it.
I’ve found a simple way to blur the image and to make the text appear, but not both at the same time; in fact merging the two codes together make it appear as the picture isn’t blurring at all. I think this is due to the fact that the text actually covers the image and the browser doesn’t receive the message that the image is being hovered.
Here is the image with text over it and here is the image with blur on hover How can I solve that issue? I’m struggling and i think I have found another way of doing it but it’s a bit cumbersome.
Here is 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>
blur photo caption ,blur photo caption Instagram ,best caption for blur photo
Creating a Blurred Photo Caption with Hover Effect
If you want to create a blur photo caption with a hover effect where the text appears when hovering over the image, you can achieve this using a combination of HTML and CSS. Let’s go through the steps to implement this effect:
1. HTML Structure
Start by creating the HTML structure for the image and the caption:
<!DOCTYPE html>
<html>
<head>
<title>Blurred Photo Caption</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<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>
</body>
</html>
2. CSS Styling
Next, create a CSS file (styles.css) and add the following styles to achieve the blur and hover effect:
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: 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 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 img {
-webkit-filter: blur(0); /* Remove the blur effect on hover */
-moz-filter: blur(0);
-ms-filter: blur(0);
-o-filter: blur(0);
filter: blur(0);
}.imgtext:hover {
opacity: 1; /* Make the text fully visible on hover */
}
Explanation
- The
.picclass is used to create a container for the image and caption. - The
.imgtextclass is the container for the caption, initially hidden (opacity set to 0). - The
hoverselector is used to define the styles that should apply when the image or caption is hovered over.
Conclusion
By following these steps, you should now have a blurred photo caption with a hover effect. When you hover over the image, it will become clear, and the text caption will appear on top of it. This combination of HTML and CSS allows you to achieve the desired effect without any complications. Feel free to customize the styles further to match your design preferences and integrate it into your website or Instagram posts with ease!