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');
Related
So I'm a little stuck with the hover effects I'm trying to make 2 hover effects work at the same time. My goal is to have a frosted glass effect with text overlay. Here is my codepen https://codepen.io/kyannashanice/pen/mdRjmry
Stylesheet:
.product {
width: 400px;
height: 400px;
}
.container {
position: relative;
width: 400px;
height: 400px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
z-index: 99;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
/* Blur Hover Effect */
img {
position: absolute;
filter: none;
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
border-radius:5px;
border:1px solid black;
}
img:hover {
opacity: 0.8;
filter: -webkit-filter: blur(4px);
filter: blur(4px);
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
HTML:
<p>Both hover effects applied but one working over the other</p>
<div class="container">
<img src="https://www.mydomaine.com/thmb/aA3TdLIHHviKBrIBVLExBBnQjSA=/1790x1790/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/string-of-pearls-product2-2f5350b5894642ea8942a2726ee20f13.jpg" class="product">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<br>
<br>
<br>
<p>No text overlay</p>
<img src="https://www.mydomaine.com/thmb/aA3TdLIHHviKBrIBVLExBBnQjSA=/1790x1790/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/string-of-pearls-product2-2f5350b5894642ea8942a2726ee20f13.jpg" class="product">
Both overlays work fine on their own but when they overlap only the text overlay will show. I would appreciate any help or direction if anyone knows how to make both effects go off at the same time.
Thank you!
The problem is that the hover is set to img. First you get the .overlay class that covers the photo and therefore the hover in the photo does not work.
Try add hover to container: ( instead img:hover)
.container:hover img{
opacity: 0.8;
filter: -webkit-filter: blur(4px);
filter: blur(4px);
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
Markup HTML
Photo with text
<div class="container">
<img src="" class="product">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Photo without text
<div class="container">
<img src="" class="product">
</div>
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;
}
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>
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/
I'm trying to build a tumblr theme from scratch (http://themeexp1.tumblr.com/) and I'm having sobre trouble on aligning the Like, Reblog and Notes icons on the center(vertically and horizontally) of the image when you hover it.
I've tried many different ways but none of them seems to be working.
The icons and the image are inside a container.
CSS
.container, .container img{
width: 350px;
float: left;
}
.container{
margin-bottom: 14px;
}
.container img{
outline: 6px solid #C8C8C8;
outline-offset: -6px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.container-overlay{
width: 100%;
height: 100%;
background-color:white;
opacity: 0;
position:absolute;
-webkit-transition: opacity 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in;
-o-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
}
.container:hover .container-overlay{
opacity: 0.5;
}
.container:hover img{
outline: 6px solid rgba(200,200,200,0);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.icons{
opacity: 0;
position: absolute;
}
.icons li{
float: left;
padding: 10px;
}
.container:hover .icons{
opacity: 1;
}
HTML
<div class="container" id="{postID}">
<div class="container-overlay"></div>
<div class="icons">
<ul>
<li>{ReblogButton color="red" size="30"}</li>
<li>{LikeButton color="red" size="30"}</li>
<li>{NoteCount}</li>
</ul>
</div>
{block:Photo}
<li><a href="{permalink}">
<img src="{block:indexpage}{PhotoURL-500}{/block:indexpage}{block:permalinkpage}{PhotoURL-HighRes}{/block:permalinkpage}" alt="{PhotoAlt}">
</a> </li>
{/block:Photo}
</div>
You could do something like this:
.icons ul {
margin:0;
padding: 0;
}
.icons {
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
.icons li {
float: none;
display: inline-block;
}
Rather than keep the float: none;, just remove the original float declaration.