I would like to do a CSS effect on hovering an image.
I'd like to show a div containing content like text when I hover on an image.
So I'd like to do something with this code:
<div id="image"><img src="image.png"/></div>
<div id="hover">Test message</div>
I have tried to hide the "hover" div in css display and on hover I tried to set the display to block, but its not working...:(
EDIT: I want the text on the image. When I hover the image it should get some opacity BUT the text should not recieve that opacity!
IS there any method to do this?
http://jsfiddle.net/ZSZQK/
#hover {
display: none;
}
#image:hover + #hover {
display: block;
}
Just keep it simple, no need to change your markup.
Update
If you want to change opacity of image on mouse hover, then
http://jsfiddle.net/ZSZQK/4/
#hover {
display: none;
position: relative;
top: -25px;
}
#image:hover {
opacity: .7;
}
#image:hover + #hover {
display: block;
}
Update 2
Since you added a couple of more requirements to your initial question, now it requires a change in the original html markup.
I am assuming you are using html5, and if so, you should use the tags appropriated for your content's context:
<figure>
<img src="http://placekitten.com/200/100" />
<figcaption>Test message</figcaption>
</figure>
and the css
figure {
position: relative;
display: inline-block;
}
figcaption {
display: none;
position: absolute;
left: 0;
bottom: 5px;
right: 0;
background-color: rgba(0,0,0,.15);
}
figure:hover img {
opacity: .7;
}
figure:hover figcaption {
display: block;
}
jsFiddle
Try:
<div id="image">
<img src="image.png"/>
<div class="hover">Test message</div>
</div>
CSS:
#image {
position:relative;
}
#image .hover {
display:none;
position:absolute;
bottom:0;
}
#image:hover .hover {
display:block;
}
Basically what I did was:
Moved text div inside #image div.
Changed id="hover" to class="hover"
Added display:block when #image is hovered and display:none if not.
Some positioning rules, it's just a fast example, let me know if it works.
There are so many ways to do this, but if you want a CSS only approach, you would need to restructure your html to something like:
<div id="image">
<img src="image.png"/>
<div id="hover">Test message</div>
</div>
And then in your CSS hide the message by default:
#hover {display:none;}
Then show the message:
#image:hover #hover {display:block;}
Without JavaScript you can do like this :
1.Make the #hover div be on top of the image and set the opacity:0;
2.Than add this to the css :
#hover:hover {
opacity:1
}
This should resolve your problem.
here is the solution i found on google
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
#mybox {
width:80px;
height:90px;
float:left;
background-color:#0F9;
padding:10px;
}
.Imgdiv {
width:80px;
height:20px;
margin:0px 0px 10px 0px; padding:0px;
cursor:pointer;
background-color:#39C;
}
#mybox .hiddenDiv {
left:0px;
display:none;
z-index:100;
width:80px;
height:50px;
margin:0px;
background-color:#336;
float:left;
}
#mybox:hover .hiddenDiv {
display:block; top:0px; left:8px;
}
</style>
<body>
<div id="mybox">
<div class="Imgdiv"></div>
<div class="hiddenDiv"></div>
</div>
</body>
</html>
Hello If I understand correctly you want something like this:
<div id="wrapper">
<div id="img-wrapper">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSp7bY6nYWTDmFXKSlP4TdCe5ghVQhbt85tQMS8dfZMEGw7QOXiLA">
</div>
<div id="text-wrapper">
<p>Hello world!</p>
</div>
</div>
CSS:
#wrapper{
position:relative;
border:1px solid black;
width:102px;
height:102px;
}
#text-wrapper{
position:absolute;
height:0px;
overflow:hidden;
font-size:14px;
font-family:Arial,Tahoma;
font-weight:bold;
transition: height 1s;
-moz-transition: height 1s; /* Firefox 4 */
-webkit-transition: height 1s; /* Safari and Chrome */
-o-transition: height 1s; /* Opera */
}
#img-wrapper:hover + #text-wrapper{
height:32px;
width:102px;
}
The key to accomplish this is this css line:
#img-wrapper:hover + #text-wrapper{
What it actually does is "When I hover img-wrapper div do some stuff in text-wrapper div"
Check demo here: http://jsfiddle.net/A9pNg/1/
Related
I would like to be redirected to Google when I click on a picture but it doesnt work. I used <a href="https://www.google.com"> but somehow the it doesnt recognize it. Do you know what the problem is and how to solve it?
HTML
<div class="image-parent">
<div data-content="Go to google" class="image fit">
<img src="https://image.shutterstock.com/image-vector/abstract-orange-linking-dots-background-600w-334647518.jpg" alt="" />
</div>
</div>
CSS
.image:after, .image:before {
position:absolute;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:after {
content:'\A';
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
}
.image:before {
content: attr(data-content);
width:100%;
color:#fff;
z-index:1;
padding:30px 30px;
top: 50%;
transform: translateY(-50%);
text-align:center;
background:red;
box-sizing:border-box;
-moz-box-sizing:border-box;
vertical-align: middle;
}
.image:hover:after, .image:hover:before {
opacity:1;
}
DEMO https://jsfiddle.net/5arxwq3k/
Check this Fiddle, The <a> tag is above the div: https://jsfiddle.net/bardalesj/xoLzdem9/
Simply dont put the :after and the :before on the .image class because the one is on your div-element outside the -tag.
put it on the a-tag or the image tag like
.image a:before
The way you have it right now it only extends the styled click area of the div tag which is not part of the link
Do same with the :hover rules and stuff.
Just modify your html and add an onclick listener.
<div class="image-parent">
<div data-content="Go to google" onclick="window.open('https://www.google.com')" class="image fit">
<img src="https://image.shutterstock.com/image-vector/abstract-orange-linking-dots-background-600w-334647518.jpg" alt="" />
</div>
</div>
This solution is an alternative to using a link.
https://codepen.io/dhanushbadge/pen/uJkcq
Hi, my question is about adding adding icons and text when hovering at the img.
When hovering it shows gray but I want it to also show with 3 icons and a text on top. I can't seem to add text inside the circle when hovering.
The original code is in the link
Please helppppppppp
html {
font-size:62.5%;
}
body {
margin:0;
font-size:1.4rem;
font-family:arial;
background-color:#ddd;
}
img {
border:0;
width:100%;
height:100%;
}
#team {
max-width:96rem;
width:100%;
min-height:200px;
height:auto;
margin:0 auto;
background-color:white;
box-sizing:border-box;
padding:0;
display:-webkit-flex;
display:flex;
-webkit-align-items:center;
align-items:center;
-webkit-justify-content:center;
justify-content:center;
-webkit-flex-direction:row;
flex-direction:row;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-align-content:flex-end;
align-content:flex-end;
}
figure {
width:12.5rem;
height:12.5rem;
display:block;
margin:0.5rem 1rem 4rem 0.5rem;
padding:0;
box-sizing:content-box;
color:black;
}
figure img {
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
#team figure img {
-webkit-transition:opacity 0.26s ease-out;
-moz-transition:opacity 0.26s ease-out;
-ms-transition:opacity 0.26s ease-out;
-o-transition:opacity 0.26s ease-out;
transition:opacity 0.26s ease-out;
}
#team:hover img, #team:active img {
opacity:1;
}
#team:hover img:hover, #team:active img:active {
opacity:0.3;
}
figcaption {
font-size:1.2rem;
text-align:center;
}
<div id="team">
<figure><img src="http://500px.com/graphics/pages/team/squares/oleg.jpg"><figcaption>Oleg Gutsol</figcaption></figure>
<figure><img src="http://500px.com/graphics/pages/team/squares/evgeny.jpg"><figcaption>Evgeny Tchebotarev</figcaption></figure>
<figure><img src="http://500px.com/graphics/pages/team/squares/dustin.jpg"><figcaption>Dustin Plett</figcaption></figure>
<figure><img src="http://500px.com/graphics/pages/team/squares/adam.jpg"><figcaption>Adam Shutsa</figcaption></figure>
<figure><img src="http://500px.com/graphics/pages/team/squares/roxy.jpg"><figcaption>Roxy Keshavarznia</figcaption></figure>
<figure><img src="http://500px.com/graphics/pages/team/squares/eric.jpg"><figcaption>Eric Akaoka</figcaption></figure>
<figure><img src="http://500px.com/graphics/pages/team/squares/david.jpg"><figcaption>David Charlec</figcaption></figure>
</div>
Are you trying to do something like this (see hover with caption) https://codepen.io/kw7oe/pen/mPeepv
To achieve this you need to structure your html as so
<figure>
<img src="" alt="">
<span class="caption">{content}</span>
</figure>
The span class in this case has opacity 0 by default and changes to opacity 1 on hover. Using some css transition, we get a smooth appear and disappear effect. Figure in this case would have a relative positioning so that the span could be absolute hover over the entire thing.
figure { position: relative; display: block; overflow: hidden; }
figure img { max-width: 100% }
figure .caption { position: absolute; display: block; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; transition: all .2s ease-in-out }
figure:hover .caption { opacity: 1; }
You can easily search for image hover caption on codepen and find a quite a few nice examples.
you can do this with jquery like below example:
$("#team img").each(function(){
$(this).hover(
function() {
$(this).text("worked");
},
function() {
$(this).text("");
}
);
});
There are two ways to accomplish this:
1. Pure HTML and CSS (no Javascript or JQuery)
See This Fiddle
First, add your text and icons into the HTML. It looks like you can add them inside the <figure> block.
Second, add a CSS rule that only shows these elements when the figure is :hover-ed Learn more about the :hover pseudo-class here
Third, tweak the position, or margins of the elements to get them to display where you want.
2. HTML and CSS and JQuery
See This Other Fiddle
Still add your HTML elements with a unique class (I used "hoverable").
Still set your CSS to hide these elements by default. Either visibility:hidden; or display:none;
Then add some JQuery which watches for the .mouseover() and .mouseout() events to toggle the visibility or display of the elements.
you can use javascript or some css trick for that.
css trick
- you can provide some divs containing your desire design. and put it as hidden then show it when the img hovered.
javacript
- same as css but the code written in js haha :).
As #John Joseph mentioned, this can be achieved easily using CSS. Here's a PURE CSS approach.
HTML
<div class="image-container">
<div class="image-cover" style="display:none;">
<img src="your_icon"/>
<span> your_text </span>
</div>
</div>
CSS
.image-container{
background-image: url(your_image);
position: relative;
}
.image-container:hover .image-cover{
display:block;
}
.image-cover{
position:absolute;
}
How do I make an image change to text when hovered, and back again when the mouse leaves using HTML, CSS and JavaScript? I am currently using HTML5UP's Aerial theme if that makes any difference.
You should be able to do this with just css:
#logo-holder {position:relative; width:992px; height:125px; /*dimensions of image*/}
#logo-holder .image,
#logo-holder .text {transition: opacity 0.5s ease-in-out;}
#logo-holder .text {position:absolute; top:0; left:0; opacity:0;}
#logo-holder:hover .image {opacity:0;}
#logo-holder:hover .text {opacity:1;}
<div id="logo-holder">
<img src="http://spydar007.com/images/logo.png" class="image" />
<div class="text">Show this text on hover</div>
</div>
I've just created a quick and dirty solution, and I have no idea if it is actually what you are looking for, you were extremely vague.
http://codepen.io/alexmccabe/pen/WvOdRw
Essentially, the text is always there but hidden using opacity: 0 and visibility: hidden. This allows us to do a nice transition to get the text to appear.
Biggest plus point, no JS used at all.
Use the below code it really helpful
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3 hover text animate in div</title>
<style>
.c--anim-btn span {
color: black;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn, .c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 64px;
font: normal normal 700 1.2em/4em Arial,sans-serif;
overflow: hidden;
width: 200px;
}
.c-anim-btn{
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn{
margin-top: -4em;
}
</style>
</head>
<body>
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
Hover Here
</span>
<span>
<a href="http://sanwebcorner.com"><img src="http://3.bp.blogspot.com/-ZFCnUdrABLc/VlMOOwRCNeI/AAAAAAAAA9g/O5-y5ySNyLc/s1600-r/Copy%2Bof%2Bsan-02%2Bcopy.png" style=" height: 35px;
margin-top: 15px;"></a>
</span>
</div>
<h2>www.sanwebcorner.com</h2>
</body>
</html>
Here is the reference
I'm trying to reproduce some pieces of CSS from the http://flink.to website, especially the tiles which contains for each article the picture, the title, the author, the link to the author page and the link to the article.
Here is the HTML for one tile :
<div class="block-module">
<a href="http://flink.to/stories/54b6e61de3039db33f00000b" class="article-link">
<span class="button">View Story</span>
</a>
<img src="https://cdn01.flink.to/api/image/54f492ec30323921c9000000/300/300/fill">
<div class="block-about">
<h2 class="block-title">Arch Enemy’s Perpetual Revolution</h2>
<span class="block-stats">
by Andrew Epstein
</span>
</div>
</div>
Here is the CSS for one tile :
.block-module { width: 283px; height: 283px; font-size: 0.9622em; display: block; cursor:pointer; border-radius:0.3125em; overflow:hidden; z-index:4; position:relative; }
.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }
.block-about a { position:relative; z-index:5; }
.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }
.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }
.button { color:#ffffff; background-color:#337d94; }
.author-link { color:#659dae; }
Everything's OK except that we can't access the article and the "view story" link which is supposed to show up only when we hover the picture, in the middle/center of it.
Edit : Here is a demo : http://jsfiddle.net/5qwejk20/
As the website's CSS sheet of Flink.to is really very complicated, I didn't find how to resolve this. Could you please help me ?
There is a lot of CSS, and obviously it's hard to tell what does what and it will need to be trimmed. But from what I can tell these are the styles making it happen. The button opacity is initially 0 (hidden), so needed to change to 1.
JSFiddle
I added this style to make it show with the cursor
.view-full-module.mod-custom-icon:hover .button.view-full-custom-el {
opacity: 1;
}
By looking at the css the elements are hiding and showing by using the z-index property and CSS Positioning. Try the following code, I use different values of z-index to overlap elements. Remember that the z-index property only is valid for elements with position:absolute,position:relative or position:fixed so you have to scaffold your website having this on mind. I also added an id to the img to select it on the css. http://jsfiddle.net/cfahhmkj/
HTML
<div class="block-module">
<a href="http://flink.to/stories/54b6e61de3039db33f00000b" class="article-link">
<span class="button">View Story</span>
</a>
<img class="albumImage" src="https://cdn01.flink.to/api/image/54f492ec30323921c9000000/300/300/fill">
<div class="block-about" >
<h2 class="block-title">Arch Enemy’s Perpetual Revolution</h2>
<span class="block-stats">
by Andrew Epstein
</span>
</div>
</div>
CSS
.block-module { width: 283px; height: 283px; font-size: 0.9622em; display: block; cursor:pointer; border-radius:0.3125em; overflow:hidden; z-index:4; position:relative; }
.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }
.block-about a { position:relative; z-index:5; }
.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }
.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }
.button { color:#ffffff; background-color:#337d94; }
.author-link { color:#659dae; }
.article-link {
position:absolute;
left:110px;
top: 120px;
z-index:-1;
}
.albumImage{
position:absolute;
z-index:0;
}
.albumImage:hover{
z-index:-2;
}
I'm trying to create a group of divs that are to be perfectly fluid squares, resizable with the viewport.
Here's the HTML structure:
<div id="container">
<div id="row">
<div class="cell A1">
<img class="spacer" src="http://imgur.com/t5M1ryQ">
<div id="text">MIKEY
<br/>
<p>SPINDRIFT KIOSK</p>DIGITAL COLLAGE</div>
</div>
<div class="cell A2">
<img class="spacer" src="http://imgur.com/t5M1ryQ">
<div id="text">ERIC
<br/>
<p>LIZ & RYAN HEMSWORTH</p>ALBUM DESIGN</div>
</div>
<div class="cell A3">
<img class="spacer" src="http://imgur.com/t5M1ryQ">
<div id="text">MIKEY
<br/>
<p>EPHEMERA</p>DIGITAL COLLAGE</div>
</div>
<div class="cell A4">
<img class="spacer" src="http://imgur.com/t5M1ryQ">
<div id="text">ERIC
<br/>
<p>REJJIE SNOW</p>SITE DESIGN</div>
</div>
</div>
The img class="spacer" image is a blank square png intended to 'stretch out' a div to prevent it from being 0x0.
Here's some CSS. I've included a little extra because I'm not sure exactly what's causing it.. I believe it's the :before elements.
.A1, .A2, .A3, .A4 {
position:relative;
}
.A1:before, .A2:before, .A3:before, .A4:before {
content:"";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: -webkit-filter .2s ease-in-out;
filter: url(filters.svg#grayscale);
/* Firefox 3.5+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(90%) brightness(30%);
/* Google Chrome, Safari 6+ & Opera 15+ */
z-index: -1;
}
.A1:before {
background-image:url('spindrift.jpg');
background-size:cover;
}
.A2:before {
background-image:url('daynnite.jpg');
background-size:cover;
}
.A3:before {
background-image:url('');
background-size:cover;
}
.A4:before {
background-image:url('');
background-size:cover;
}
.A1:hover:before, .A2:hover:before, .A3:hover:before, .A4:hover:before {
-webkit-filter:none;
}
/* text hover */
div.cell:hover #text {
opacity:0;
}
#text {
opacity:1;
display:table;
position:absolute;
z-index:999;
color:#ffffff;
text-align:center;
width:100%;
top:44%;
left:0;
text-decoration:none;
}
p {
font:16px ProximaNovaBold, sans serif;
margin:0;
padding:1 0 1 0;
}
/* table rules */
#container {
display:table-row;
width:100%;
}
#row {
display:table-row;
width:100%;
}
.cell {
position:relative;
display:table-cell;
width:700px;
height:auto;
}
html {
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
margin:0;
padding:0;
background-color:black;
color:black;
}
/* image SPACER rules */
img {
max-height:600px;
max-width:100%;
height:auto;
width:100%;
z-index:2;
}
I'm using some webkit filters over the background images of these divs, and I don't want these filters affecting the child text so I MUST use the :before indicator. Here's a fiddle
http://jsfiddle.net/QC28s/2/
They are blank(with no background images) right now, it shouldn't matter. If you go into developer tools and look at the divs, the spacer is behaving correctly as it forces each square to 209x209. However if you look at the :before indicator directly before it on the HTML you can see that it(:before) is putting a small 6px margin on the bottom of the squares, making them 209x215. That's what my problem is... Much appreciated.
Explanation :
The :before element has position:absolute; so it can't expand it's parent. The problem doesn't come fro there.
The issue is the whitespace created by the images. Images are inline elements they add white-space just after them (like inline-block elements).
Solution :
Add display:block; to the image tag so they are not inline elements anymore and don't add white-space.
See this FIDDLE
Btw you might be intersted in this question