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.
Related
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;
}
I have several figure-elements where I want to add some simple hover-effect to the caption when hovering the parent-container. But that doesn work out, neither with > nor in the way shown below, what do I do wrong there?
.kategorie_container .product_caption{
margin:0;
width:100%;
position: absolute;
padding: 1vh 2vw;
bottom: 0;
background:white;
transition: 0.2s;
}
.kategorie_container figure:hover .kategorie_container .product_caption {
background:blue;
}
And this is the markup-structure of it:
<figure class="col col-3 ">
<a href="#">
<img src="assets/media/raster/active-pro80-dose_1.jpg" />
<div class="product_caption">
<h6 class="produktname">Productname</h6>
<h6 class="produktpreis">Productprice</h6>
</div>
</a>
</figure>
Thanks!
There is no element with the class "kategorie-container" inside your figure. I think you meant to write
.kategorie_container figure:hover .product_caption {
background:blue;
}
I have problem with my hover on img in my #picutre div. HTML:
<div id="picture">
<img class="content_pic" src="image/exemple.jpg" alt="exemple"/>
<img class="content_pic" src="image/exemple.jpg" alt="exemple"/>
</div>
And my CSS looks like this:
#picture {
text-align:center;
}
#picture img {
width:40%;
height:40%;
border:1px solid #000000;
display:inline-block;
margin-left:0;
margin-right:0;
opacity:0.4;
}
.content_pic:hover{
opacity:1.0;
}
So i'm wondering why it doesn't work. I'm using Google Chrome, checked IE10 too but not working there too.
#picture img is more specific than .content_pic:hover so opacity:0.4; will always overwrite opacity:1.0;.
Use #picture img:hover instead.
You have given the picture img opacity 0.4 and hover effect for .content_pic:hover so this vl not work.
see the fiddle here
http://jsfiddle.net/4z55sjn0/2/
Hello i have been trying a lot to do the pop-up image effect using CSS and CSS3 but the result is nothing i don't know what is the problem, i think it's because of the pseudo-classes don't work with me like (visited,actived and focus etc..) just hover works with me so could anybody help me solve this problem?
what i mean by pop-up image effect is : you know when clicking on an image on Facebook that image is popped up with it's real size and the background is become a little bit more dark?
By the way does anyone know what is the problem with the pseudo-classes why they don't work with me?
thanks
<style type="text/css">
.pop{
border: 1px solid #000 ;
border-radius: 15%;
width: 200px;
height: 200px;
}
.pop:active{
width:500px ;
height:500px;
position:relative;
right: -65px;
top: 200px ;
background-color:#000;
}
<img class='pop' src="C:/Users/mohammad ghazi/Desktop/Xhtml folder/friends.jpg" alt="" />
What you are looking for is called a lightbox. Their are many good tutorials on how to make a pure css one, here is a few of them:
http://andornagy.com/pure-css-image-lightbox/
http://www.designcouch.com/home/why/2013/11/01/responsive-css3-lightbox-with-no-javascript/
http://www.thecssninja.com/xhtml/futurebox
The problem with using :target as a CSS click event is that it has some downsides such as page jumps or browser history.
You can avoid the downsides of :target by using the checkbox hack:
Make a checkbox and hide it:
<input type="checkbox" id="check" style="display:none;">
Then, make the image you want to have a lightbox for, and wrap it in a <label>
<label for="check">
<img src="http://lorempixel.com/400/400/" width="200">
</label>
Now, write the HTML for the lightbox:
<label for="check">
<div id="cover">
<div id="box">
<img src="http://lorempixel.com/400/400/" width="400">
</div>
</div>
</label>
And now, for the CSS magic!
Create the lightbox css:
#cover{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,0.5);
display:none;
}
#box{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
width:400px;
height:400px;
border:10px solid white;
}
This creates and centers the lightbox.
Now you need to add the click event:
#check:checked ~ label #cover{
display:block;
}
This CSS means, If #check is checked (:checked selector), find the sibling (~) with a id of #cover inside a label element and apply the rule to it.
That's it!
Your coding should look like this:
<input type="checkbox" id="check" style="display:none;">
<label for="check">
<img src="http://lorempixel.com/400/400/" width="200">
</label>
<label for="check">
<div id="cover">
<div id="box">
<img src="http://lorempixel.com/400/400/" width="400">
</div>
</div>
</label>
And CSS:
#check:checked ~ label #cover{
display:block;
}
#cover{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,0.5);
display:none;
}
#box{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
width:400px;
height:400px;
border:10px solid white;
}
SEE THIS JSFIDDLE
I think what you're going for is definitely javascript or Jquery. here is a JSFiddle which shows what i'm on about.
HTML:
<img src="http://0.s3.envato.com/files/19320511/Scenery%2080x80%20Avatar.png"/>
<div id="divLargerImage"></div>
<div id="divOverlay"></div>
JQuery:
$('a img').click(function () {
var $img = $(this);
$('#divLargerImage').html($img.clone().height(250).width(250)).add($('#divOverlay')).fadeIn();
});
$('#divLargerImage').add($('#divOverlay')).click(function () {
$('#divLargerImage').add($('#divOverlay')).fadeOut(function () {
$('#divLargerImage').empty();
});
});
CSS:
#divLargerImage
{
display: none;
width: 250px;
height: 250px;
position: absolute;
top: 35%;
left: 35%;
z-index: 99;
}
#divOverlay
{
display: none;
position: absolute;
top: 0;
left: 0;
background-color: #CCC;
opacity: 0.5;
width: 100%;
height: 100%;
z-index: 98;
}
There are many ways to do this, but most easy way to do this is you can use lighbox tools like: FancyBox, Colorbox plugins etc.
Fancy Box: http://fancybox.net
Color Box: http://www.jacklmoore.com/colorbox/
Alternatively you can use: jQuery Lightbox Generator
jQuery Lightbox Generator: http://visuallightbox.com/
For the problem with pseudo-classes, what i got from your question is you want to enlarge image?
Check this Jsfiddle:
` http://jsfiddle.net/23zgvg1f/1/ `
I hope this helps :)
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/