I want to display a text and blur the image on hover.
The blurring works but the text is never displayed.
CSS:
#d1{
z-index: 100;
position: absolute;
top: 1100px;
left: 285px;
color: white;
font-size: 100px;
visibility: hidden;
}
#bg2 {
position: absolute;
left: 0;
right: 0;
top: 898px;
}
#bg2:hover {
filter: blur(5px) grayscale(1) brightness(.3);
-webkit-filter: blur(5px) grayscale(100%) brightness(.3);
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transform: translateX(0);
-webkit-transform: translateX(0);
}
#bg2:hover #d1{
visibility: visible;
}
HTML:
<a href="F2L.html">
<img src="f2l.JPG" id="bg2" alt="">
<p id="d1">F2L</p>
</div>
</a>
bg2 is the image id.
d1 is the text id.
there is a problem with your selector #bg2:hover #d1. it shows that #d1 is inside #bg2,instead #d1 and #bg2 are siblings. the code must be:
#bg2:hover ~ #d1{
visibility: visible;
}
Related
Okay, so. 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>
Use the pseudo class :hover on the .pic container element, and not on each individual child element.
For example:
.pic .imgtext:hover to .pic:hover .imgtext
and
.pic img:hover to .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>
First of all your text-span was missing a left position setting, which i added (0). Apart from that, I changed the selectors for the hover state so that the image and the text settings both change when their parent element .pic is hovered:
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>
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>
This is a two part problem. The first part is I want the image fade and the text fade to happen at the same time (on a hover over).
The second part is, I thought if I had the <p> tag inside of the <div> then it would "inherit" (I may not be using the term properly) the div properties. The text is supposed to remain fixed center of the image so anytime the image resizes or moves it takes the text with it.
Clearly neither one of those things are happening.
.image-wrapper p {
position: absolute;
left: 250px;
top: 130px;
padding: 10px;
border: 1px solid #FFF;
opacity: 0;
}
.image-wrapper p:hover {
position: absolute;
left: 250px;
top: 130px;
padding: 10px;
border: 1px solid #FFF;
opacity: 100;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.5;
}
<div class="image-wrapper">
<img src="http://placehold.it/150x80?text=IMAGE" class="fade" style="width:100%" alt="Image">
<p>This text here</p>
</div>
Here is a link just in case
Check this out and let me know your feedback. Thanks!
The first part is I want the image fade and the text fade to happen at the same time (on a hover over).
For this to happen, add hover to image-wrapper rather than individually to p and the img like the below for instance:
.image-wrapper:hover p {
opacity: 1;
}
.image-wrapper:hover .fade {
opacity: 0.5;
}
The text is supposed to remain fixed center of the image so anytime
the image resizes or moves it takes the text with it.
For this you can use the transform to center align the text over the image responsively.
.image-wrapper p {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
snippet below:
.image-wrapper{
position: relative;
}
.image-wrapper p {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 10px;
border: 1px solid #FFF;
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.image-wrapper:hover p {
opacity: 1;
}
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.image-wrapper:hover .fade {
opacity: 0.5;
}
<div class="image-wrapper">
<img src="http://placehold.it/150x80?text=IMAGE" class="fade" style="width:100%" alt="Image">
<p>This text here</p>
</div>
for first one you can use like that
.image-wrapper:hover{
opacity :0.7;
}
Both 1.) and 2.) - Try this code:
HTML:
<div class="image-wrapper">
<img src="http://placehold.it/150x80?text=IMAGE" class="fade" style="width:100%" alt="Image">
<p class="fade">This text here</p>
</div>
Adding the class="fade" to the <p> will make the transition smoothly for the text as well.
CSS:
.image-wrapper p {
display: none;
color: #F00;
position: absolute;
left: 250px;
top: 130px;
padding: 10px;
border: 1px solid #FFF;
opacity: 0;
}
.image-wrapper p:hover, .image-wrapper:hover p {
display: block;
position: absolute;
left: 250px;
top: 130px;
padding: 10px;
border: 1px solid #FFF;
opacity: 100;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
// When either hovering the p or the image, apply the transition.
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.5;
}
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>
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);
}
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>
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!
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;
}
im pretty new at coding and im struggling right now.
I currently have image with text appearing when i hover it. Using overlay + opacity.
What I would like to have:
img = this picture
img hover = this picture
img on click = the text with the orange background wich i currently have on hover.
Thanks for the help and sorry for my english.
EDIT: here is the code.
EDIT2: i would like to make it look like this but with text as onclick, not a picture. Basically the same looking text as i have currently got on hover:
img src="image1" alt="image"
onmouseover="this.src='image2';"
onclick="this.src='image3';
onmouseout="this.src='image1';"
.item .item-wrap {
overflow: hidden;
position: relative;
}
.item .item-wrap a {
display: block;
cursor: pointer;
}
.item .item-wrap .overlay {
background: #ed560e;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
zoom: 1;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.item .item-wrap img {
vertical-align: bottom;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.item .item-wrap .bieres-item-meta {
position: absolute;
top: 10%;
left: 10%;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
zoom: 1;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.item .item-wrap .bieres-item-meta h5 {
font: 15px/21px"raleway-heavy", sans-serif;
margin: 0;
color: white;
word-wrap: break-word;
}
.item .item-wrap .bieres-item-meta p {
font: 14px/18px"raleway-semibold", sans-serif;
color: #fbcab3;
margin: 0;
}
/* on item hover */
.item:hover .overlay {
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1;
zoom: 1;
}
.item:hover .bieres-item-meta {
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1;
zoom: 1;
}
.item:hover .item-wrap img {
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
<div class="bgrid item">
<div class="item-wrap">
<a href="#">
<img src="http://v5.lapiece.ch/images/portfolio/mobykid.jpg" alt="Moby Kid">
</a>
<div class="overlay"></div>
<div class="bieres-item-meta">
<h5>Moby Kid</h5>
</br>
<p style="margin-right: 20px;">
Apparence: Robe jaune pâle et trouble. Bonne tenue de mousse.</br>
</br>
Arôme: Fruité avec des notes de banane.</br>
</br>
Goût: Légèrement acidulé, avec des saveurs nets d'agrumes et discrètes de fruits tropicaux.
</br>
</br>
Alcool: 4.5 [ % ]</br>
Couleur: 6 [ EBC ]</br>
Amertume: 18 [ IBU ]</br>
Densité finale: 1009 [ g/l ]</p>
</div>
</div>
</div>
You may use something like this - For hovering effect
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.imgBox
{
width: 441px;
height: 248px;
background: url(img1.jpg) no-repeat;
}
.imgBox:hover
{
background: url(img2.jpg) no-repeat;
<!--These are optional-->
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
}
</style>
</head>
<body>
<div class="imgBox">
</div>
</body>
</html>
Just put an image in the background of your overlay class
background-image: url('something.jpg');
The vertical alignment of the text on :hover isn't working . Also after hovering, the whole area of posts should be cover with pointer cursor and should be clickable, but it isn't.
HTML
<div class="photoset post-background">
<div class="imgoverlay text-light">
<a href="{Permalink}">
<div class="photos">
{block:Photos}
<img alt="" src="{PhotoURL-500}">
{/block:Photos}
</div>
<div class="overlay">
<span class="overlaycolor"></span>
<div class="overlayinfo">
{block:ContentSource}
<h6>{SourceTitle}</h6>
{block:ContentSource}
</div>
</div>
</a>
</div>
</div>
CSS
.imgoverlay {
position: relative;
overflow: hidden;
display: block;
max-width: 100%;
}
.imgoverlay img {
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
}
.imgoverlay .overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(Opacity=0)";
-webkit-transition: opacity .3s ease;
-moz-transition: opacity .3s ease;
-o-transition: opacity .3s ease;
-ms-transition: opacity .3s ease;
transition: opacity .3s ease;
}
.imgoverlay:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "alpha(Opacity=100)";
}
.imgoverlay .overlaycolor {
width: 100%;
height: 100%;
background: {color:Post Hover};
};
Example http://www.jnck.sk/
Thanks for any help!
Use span with display:block instead of div inside link. Block elements like div shouldn't be in inline blocks.
For vertical align of text you can use i.e. this:
.overlayinfo {
position: relative;
top: 50%;
transform: translateY(-50%);
}
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/