Good afternoon
in an html site, I have one rectangular image and when I hover over it a second image pops out. The second image is bigger than the original image and it on top of a button.
The problem is, I can't click the button, it always triggers the hover image.
How can fix this so that I can click the button?
Here's a fiddle
HTML:
<li id="menu-item-2365" class="positionabsolute menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-2365 has-image"><a href="como-ajudar/donativos/"
class="menu-image-title-hide menu-image-hovered"><span class="menu-image-hover-wrapper">
<img width="126" height="38" src="http://piq.codeus.net/static/media/userpics/piq_307293_400x400.png" class="menu-image menu-image-title-hide" style="position:absolute" alt=""><img width="126" height="145" src="http://piq.codeus.net/static/media/userpics/piq_307293_400x400.png" style="position:absolute" class="hovered-image menu-image-title-hide" alt="" ></span></a></li>
<br/>
<br/>
<br/>
<input type="button" value="click" style="margin-left:50px" />
https://jsfiddle.net/u15qbh6w/
You can set display: none to the second image and if it is hovered, then display: initial
So the css of your example would look like that:
.menu-item a.menu-image-hovered img.hovered-image,
.menu-item a.menu-image-hovered:hover img.menu-image {
opacity: 0;
transition: opacity 0.25s ease-in-out 0s;
}
.menu-item a.menu-image-hovered img.hovered-image {
display: none;
}
.menu-item a.menu-image-hovered:hover img.hovered-image {
display: initial;
opacity: 1;
}
Related
here's a little css I use to swap images. I use them for little 32px social icons which go from green image to red image. They just swap.
This is the code (using placeholder images):
.soc img:last-child {
display: none;
}
.soc:hover img:first-child {
display: none;
}
.soc:hover img:last-child {
display: inline-block;
}
<li>
<a class="soc" href="some-link-here" target="_blank">
<img src="https://lorempixel.com/32/32/cats" />
<img src="https://lorempixel.com/32/32/food" />
</a>
</li>
I want to add a little DELAY between the swaps. Like 0.8 or 1.6 seconds.. so the transition between images / color changes are smoother and prettier.
The transition should go like this: Normal Condition to HOVER condition and also, when you just hover and move mouse away, getting back to its normal condition should also have the delay.. well that's what I would love to make.
I tried all kinds of DELAY codes that I was able to google, none worked.. But I also don't want to change the main aforementioned css code which I use, to the ones that will have to have the background-image so that for each icon I gotta make a different 5 line-long css code.
Can anyone please help me with this?
Thank you.
set the right opacity starting points
:first-child or green starts at 1 or default value and goes to 0 on :hover and :first-child or red starts at 0 and goes to 1 on :hover.
position:absolute stacks the objects on top of each other.
then use transition:opacity ease 1s for the smooth animation effect. What this property does is it tells the browsers to fade the transition from opacity:0 to opacity:1 over the duration of 1s.
adding it to the selector instead of the pseudo-class :hover makes the smooth transition occur both when you hover and when you leave the :hover state.
.soc img {
position: absolute;
width: 40px;
height: 40px;
transition: opacity ease 1s;
}
.soc img:first-child {
background: green
}
.soc:hover img:first-child {
opacity: 0
}
.soc img:last-child {
opacity: 0;
background: red
}
.soc:hover img:last-child {
opacity: 1
}
<li>
<a class="soc" href="some-link-here" target="_blank">
<img src="/iconslocation/icongreen.png" />
<img src="/iconslocation/iconred.png" /></a>
</li>
It sounds you want to soften the transition between images by fading from one to the other. I recommend using CSS to transition opacity over time.
In my example below, I've positioned the second image absolutely, so it's placed directly in front of the first one, and set it to be transparent. Then I fade it in upon hover.
ul {
list-style: none;
padding: 0;
margin: 0;
}
.soc {
position: relative;
display: inline-block;
}
.soc img:last-child {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity .2s;
}
.soc:hover img:last-child {
opacity: 1;
}
<ul>
<li>
<a class="soc" href="some-link-here" target="_blank">
<img src="//lorempixel.com/50/50/abstract/1/" />
<img src="//lorempixel.com/50/50/abstract/2/" /></a>
</li> <li>
<a class="soc" href="some-link-here" target="_blank">
<img src="//lorempixel.com/50/50/abstract/3/" />
<img src="//lorempixel.com/50/50/abstract/4/" /></a>
</li>
</ul>
Pure CSS
If we apply the default image as the background-image: url() of all a.soc elements, and give them all an :after pseudo element holding the second image to show on :hover (and optionally (and ideally for accesibility) :focus), we can then transition the opacity of the :after element to 1 on user interaction, and at full opacity it will cover/hide its parent's background-image.
The effect is as expected, but requires no <img> markup and is automatically applied by the magic of CSS to every link with class="soc".
.soc,
.soc:after {
display: inline-block;
width: 32px;
height: 32px;
background: url( https://lorempixel.com/32/32/cats );
}
.soc:after {
opacity: 0;
content: "";
position: absolute;
background: url( https://lorempixel.com/32/32/food );
transition: opacity 800ms; /* timing can be in seconds or milliseconds */
}
.soc:hover:after,
.soc:focus:after {
opacity: 1;
}
<ul>
<li><a class="soc" href="some-link-here" target="_blank"></a></li>
<li><a class="soc" href="some-other-link-here" target="_blank"></a></li>
<li><a class="soc" href="another-link-here" target="_blank"></a></li>
</ul>
After clicking on either right or left in this carousel, the button remains darker, even after you mouse off the elelemnt. I assume the reason is some sort of visited state, but looking at the CSS, I don't see anything relevant. Is there any way to prevent that effect?
I've written a JSFiddle to demonstrate it, and copied the HTML below.
<div class='container'>
<div class='row'>
<div class='carousel slide' data-interval='false' id='product-image-carousel'>
<!-- Wrapper for slides -->
<center class='carousel-inner'>
<div class='active item'>
<img alt='...' src='http://placehold.it/300x200'>
</div>
<div class='item'>
<img alt='...' src='http://placehold.it/300x200'>
</div>
</center>
<!-- Controls -->
<a class='left carousel-control' data-slide='prev' href='#product-image-carousel' role='button'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' data-slide='next' href='#product-image-carousel' role='button'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
</div>
<!-- Carousel -->
</div>
</div>
Quick workaround: Overwrite bootstrap's css.
.carousel-control:hover,
.carousel-control:focus {
color: #fff;
text-decoration: none;
opacity: .9;
filter: alpha(opacity=90);
}
Remove completely the :focus selector
You can use this workaround:
$(".carousel-control").focus(function(event){
$(this).blur();
});
It works for me.
Simply fix this with css , Decrease the opacity to this .carousel-control:hover, .carousel-control:focus classess , apply the below code your fiddle or your page you can see the difference , Thanks
#product-image-carousel a {
outline: none !important; /* this will remove the outline when we click the anchor tag */
}
.carousel-control:hover, .carousel-control:focus {
opacity: 0.5; /* this will remove the darker color on focus and hover */
}
jsfiddle Update
.carousel-control:focus {
outline: none;
opacity: 0.5;
}
.carousel-control:hover {
opacity: 0.8;
}
I have created CSS onHover popup as given here. but problem is, User should be able to click the Register link in the example. here, Popup disappears as I move the mouse aware form the link.
Can anyone tell how it could be achieved ?
HTML:
<div class="how f-left">
<h7>How does this work?</h7>
<div class="how-works bubble-outer">
<div class="navigation-up-arrow"></div>
<div class="body">
<h4>How It Works</h4>
<ol class="bubble-inner">
<li>Tell Us What's Wrong </li>
<li class=""> Register to Get Quotes from Local Shopshere </li>
<li class=" bold-txt ">Call Shop / Get Vehicle Serviced </li>
<li>Get Cash Back </li>
</ol>
</div>
</div>
</div>
Below CSS is used for onHover PopUp:
.how h7:hover + .how-works {
display: block;
}
You can make it display on hovering the parent (.how), not just its preceding sibling. Hovering the parent happens when you are hovering any of its descendants (the link, .how-works, any of the children of .how-works).
To do this, change:
.how h7:hover + .how-works {
display: block;
}
to:
.how:hover .how-works {
display: block;
}
DEMO
Also, if you want to make it work for touchscreens (no hover there), you could adjust a bit your HTML. Change
<h7>How does this work?</h7>
to
<a class="how-it-works" href="#" tabindex="1"><h7>How does this work?</h7></a>
and add this to the CSS as well:
.how-it-works:focus + .how-works {
display: block;
}
DEMO
Add this to your CSS:
.how-works:hover {
display: block;
}
Modified version of your demo: little link.
Here is a working example link.
Put
.how:hover .how-works {
display: block;
}
instead of
.how h7:hover + .how-works {
display: block;
}
and add position: relative; top: 0px; css properties to .how .how-works.bubble-outer{ ... }
I have an icon that I display on top, right of a div on hovering over the div. My code is like this:
<div class='edit_hover_class'>
<!-- some code -->
</div>
And the corresponding css file contains:
.edit_hover_class:hover {
background: url("trash.gif") no-repeat scroll right top;
}
I want to attach a link to the edit icon, is it possible with plain css? If so, how?
You could hide a link until hover like so:
<div class='edit_hover_class'>
<a href='#'><img src='icons/trash.gif' /></a>
</div>
.edit_hover_class a{
visibility:hidden;
}
.edit_hover_class:hover a {
visibility:visible;
}
See jsfiddle:
http://jsfiddle.net/Auzm5/
Or if you only want the icon to link, use CSS visibility:
http://jsfiddle.net/Auzm5/1/
I havent tested this but its worth a try:
HTML
<div class='edit_hover_class'>
<a href='#'><img src='icons/trash.gif' /></a>
</div>
CSS
.edit_hover_class a {
pointer-events: none;
cursor: default;
}
.edit_hover_class a:hover {
pointer-events: auto;
cursor: pointer;
}
I have a navigation bar with images, like so:
<ul>
<li class="me">
<span class="cont"><img src="dummy.png" /></span>
</li>
<li class="me">
<span class="cont"><img src="dummy.png" /></span>
</li>
</ul>
On hovering over a list item I want to change the background color to cover the span and image like so:
.me {background-color: none;}
.me:hover {background-color: rgba(150,150,150,0.5);}
Problem is, the image does not get covered... Is this because the background is in fact... a "background" on which child elements are sitting? If so, how could I achieve this effect with plain CSS?
EDIT - solution
this worked with my original HTML structure:
<ul>
<li>
<a href="" class="ui-btn">
<span class="ui-btn-inner"> /* CONTAINS IMAGE AS BACKGROUND */
<span class="ui-btn-text">text</span> /* GETS BACKGROUND */
<span class="ui-icon"></span>
</span>
</a>
</li>
</ul>
"Negative logic": If I assign the background to list item, it sits behind all child elements, so I figured I needed to assign the background to an element that is a child of the element containing the img to have it appear above all items. span ui-btn-inner contains the image, so setting the :hover background on span ui-btn-text makes it appear above the image... weird, but works.
Yes, the background is just a background, and is placed behind any child elements.
To achieve what you're looking for, try using the css :after pseudo element to mask the image on hover:
.me {
position: relative;
}
.me:hover:after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(150,150,150,0.5);
}
It's shiny, you get to use the image as a semantic image, and requires no extra HTML markup.
Yes, it's because the background is in fact a background. The best method to achieve this in raw css would be to continue using the background:
.me
{
background-color: none;
background-image: url(dummy.png);
background-repeat: no-repeat;
}
.me:hover
{
background-color: rgba(150,150,150,0.5);
background-image: ;
}
You could also achieve this effect with a bit of javascript as well.
<ul>
<li class="me">
<span class="cont"><img="dummy.png" onmouseover='this.src="sometransparent.gif";' onmouseout='this.src="dummy.png";'></span>
</li>
<li class="me">
<span class="cont"><img="dummy.png"" onmouseover='this.src="sometransparent.gif";' onmouseout='this.src="dummy.png";></span>
</li>
</ul>
Code not tested. It might require tweaking to get it just right.
Edit: Layering concept
None of this pseudo-code is test, but I've done it before so it may just take a bit of tweaking. I don't have a copy of the original I did on hand so I'll have to wing it. The first step is to create a relative container and 2 sub containers.
.meContainer
{
position: relative;
width: 100px;
height: 30px; /* I usually specify height/width for these things */
}
.meContainerLink
{
position: absolute;
top: 0;
left: 0; /* You need to use position to get them to overlap */
z-index: 1; /* Provide a layer */
}
.meContainerAlpha
{
position: absolute;
top: -30px; /* Move it UP 30px */
left: 0px;
z-index: 2; /* Place it on top of the other layer */
display: none; /* Hide it */
background-color: rgba(150,150,150,0.5);
}
.meContainerAlpha:hover
{
display: inline; /* Show it */
}
Then you'd need to place these in divs inside your <li>.
<ul>
<li class="me">
<div class="meContainer">
<div class="meContainerLink">
<img="dummy.png">
</div>
<div class="meContainerAlpha">
</div>
</div>
</li>
<li class="me">
<div class="meContainer">
<div class="meContainerLink">
<img="dummy.png">
</div>
<div class="meContainerAlpha">
</div>
</div>
</li>
</ul>
I don't recall ever trying this method inside embedded <li> tags, so it may behave oddly at first. You may have to abandon <li> and switch to a different <div> structure entirely.
another potential option that should be more cross browser than :after could be:
.me:hover span { display: hidden; }