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;
}
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;
}
I'm working on a tiny css action which based on A element hover, will display another element. The code is pretty basic:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">LOREM IPSUM</div>
</a>
.portfolio-reaction {
width:250px;
height:250px;
display:block;
}
.headline-overlay {
background:none;
height:100%;
width:100%;
display:none;
position:absolute;
top:10%;
z-index:999;
text-align:left;
padding-left:0.5em;
font-weight:bold;
font-size:1.3em;
color:#000;
}
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
and jsfiddle: https://jsfiddle.net/yL231zsk/1/
This solution works in 99%. The missing percent is the effect - while moving mouse arrow through the button, text is blinking. I have no idea why. Secondly - what if I want to extend number of appearing elements from 1 to 3. So to have:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
<p class="element-1">abc</p>
<p class="element-2">111</p>
<div class="element-3">X</div>
</div>
</a>
Thank you for any tips and advices.
You wrote the following in your css file :
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
It won't work since .attachment-grid-feat isn't the parent of .headline-overlay. So it won't select the state when the parent is selected because there are no element .healine-overlay inside .attachment-grid-feat. Also no need to add ~ between the two. The right selector is the following :
.portfolio-reaction:hover .headline-overlay {
display: block;
}
This way you are targeting the child div .healine-overlay when parent div .portfolio-reaction (you might want to make the <a> tag a <div> tag) is hovered.
.portfolio-reaction {
width: 250px;
height: 250px;
display: block;
}
.headline-overlay {
background: none;
display: none;
position: absolute;
top: 10%;
z-index: 999;
text-align: left;
padding-left: 0.5em;
font-weight: bold;
font-size: 1.3em;
color: #000;
}
.portfolio-reaction:hover .headline-overlay {
display: block;
}
<div title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
<div id="element-1">Hello 1</div>
<div id="element-2">Hello 2</div>
<div id="element-3">Hello 3</div>
</div>
</div>
In this code snippet, three elements are contained inside .headline-overlay. On hover, all three elements are displayed.
First, change the last CSS line from this:
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
into this:
.attachment-grid-feat:hover .headline-overlay {
display:block;
}
And will "half" work. You need after to change the width and height of your <div class="headline-overlay"> from a smaller percentage to match your square width and height(leaving it to 100% covers the entire screen, and as a result, the text wont dissapear, no matter where you will move the cursor). Or, If you want your <div> element to match automaticaly the square size, then you leave the width and height unchanged and change only his position:absolute into position:relative and of course, a little adjusting his position from top.
Here is a working fiddle: https://jsfiddle.net/yL231zsk/9/
I have a span on an image which I hide using display:none. Trying to show it with display:block on hover is not working. Can any one help me?
.imagegood {
position: absolute;
top: 200px;
background-color: white;
color: black;
padding: 10px;
font-size: large;
display: none;
}
.ShowHidden:hover {
display: block !important;
}
<div style="position:relative; text-align:center;margin-top: 10px; padding-right: 0px; padding-left: 0px;" class="col-sm-6 col-md-6 col-lg-4 text-center ">
<a class="ShowHidden" href="#">
<div>
<img style="width:100% ; height:auto;" class="img-responsive center-block" src="http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg" />
<span class="imagegood">GoodTitle</span>
</div>
</a>
<h3 style="font-weight:bold;" class="h">GoodTitle</h3>
<h5 class="h">GoodSubText</h5>
</div>
Consider following
.ShowHidden:hover .imagegood{
display:block;
}
.imagegood{
position: absolute;
top: 100px;
background-color:white;
color:black;
padding:10px;
font-size:large;
transition: 1s all;
opacity: 0;
}
.ShowHidden:hover .imagegood{
opacity: 1;
}
<div style="position:relative; text-align:center;margin-top: 10px; padding-right: 0px; padding-left: 0px;" class="col-sm-6 col-md-6 col-lg-4 text-center ">
<a class="ShowHidden" href="#">
<div>
<img style="width:100% ; height:auto;" class="img-responsive center-block" src="http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg" />
<span class="imagegood">GoodTitle</span>
</div>
</a>
<h3 style="font-weight:bold;" class="h">GoodTitle</h3>
<h5 class="h">GoodSubText</h5>
Used to this
.ShowHidden:hover .imagegood{
display:inline-block ;
}
Demo
Code
.imagegood{
position: absolute;
top: 200px;
background-color:white;
color:black;
padding:10px;
font-size:large;
display:none;
}
.ShowHidden:hover .imagegood{
display:inline-block ;
}
<div style="position:relative; text-align:center;margin-top: 10px; padding-right: 0px; padding-left: 0px;" class="col-sm-6 col-md-6 col-lg-4 text-center ">
<a class="ShowHidden" href="#">
<div>
<img style="width:100% ; height:auto;" class="img-responsive center-block" src="http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg" />
<span class="imagegood">GoodTitle</span>
</div>
</a>
<h3 style="font-weight:bold;" class="h">GoodTitle</h3>
<h5 class="h">GoodSubText</h5>
</div>
Answer is already given but for your understanding :
If you want to hide and show any element then target that element too like you hide the span so on hove use span also like this .ShowHidden:hover span
If you are hiding div then use div instead of span or you can use class/id name also.
Working Demo
What I think you should try is visibility: hidden; vs display: none;
display: none; removes it from the page - you can still interact with it in the dev tools, but can't see it where as visibility: hidden has allocated dom space.
see this answer here
Why not use JQuery
$(".imagegood")..mouseover(function() {
$( ".center-block").fadeIn();
});
you can even have it popup for 3sec
$( ".center-block").fadeIn().delay(3000).fadeOut();
take a look at this link http://api.jquery.com/fadein/
I'm trying to use a background color with some opacity on hover over a div. But i get flickering effect over the color once i hover over it. while as the element i hover over is working properly.
My code and css is as below:
<div class="flip-menu">
<section class="flip-item-wrap">
<img class="fake-image" src="http://lorempixel.com/500/500/food/11" alt=""><!-- this image will add height to parent element -->
<input type="checkbox" class="flipper" id="a">
<label for="a" class="flip-item">
<figure class="front"><img class="img_hover" src="http://lorempixel.com/500/500/food/1" alt=""></img>
</figure>
<figure class="back">
<img src="http://lorempixel.com/g/500/500/food/1" alt=""></img>
<div class="flip-item-desc">
<h4 class="flip-item-title">Lorem ipsum dolor</h4>
<p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
</div>
</figure>
</label>
<div style="background: none repeat scroll 0 0 #FFFFFF;
color: #000000;
left: 1px;
opacity: 0.8;
padding: 4px;
position: absolute;
text-transform: uppercase;
top: 162px;
width: 182px;
z-index: 9999;
left: 0px;
overflow:hidden;" class="hover_div">
hhh
</div>
</section>
</div>
.img_hover:hover{
border:1px solid #888888!important;
}
.hover_div{
display:none;
}
.flip-item-wrap :hover + div{
display: block;
cursor:pointer;
}
I think I understand what you are trying to do. The confusion here arose because in testing your code there is an obvious flicker on the image's border, and that's what Yasser was trying to fix - which he did. But I think you are referring to something else. I suggest starting from scratch and cleaning your code up, that will make things easier - this alone will probably solve your problem. I made a fiddle that accomplishes what I believe you are after.
This should get you started in the right direction.
<style>
.main {
width:500px;
height:500px;
}
.cover {
position:absolute;
background:#ccc;
opacity:.5;
width:500px;
height:500px;
display:none;
}
.main:hover .cover {
display:block;
}
</style>
<div class="main">
<div class="cover"> </div>
<img class="img_hover" src="http://lorempixel.com/500/500/food/1" alt="">
</div>
JSFiddle
I am assuming the flickering to be the border which comes up and shakes the layout a bit. Add this line of css and let me know if this works for you.
.img_hover{
border:1px solid #fff !important;
}
Atlernatively you should add a jsfiddle so that we could help you better.
Edit:
A better way to do this would be this - Thanks Ruddy
.img_hover:hover {
outline:1px solid #888888!important;
}