I have a primary image with a secondoary image of an arrow on top, where the arrow is inserted by using a pseudo after-element.
Now I would like to change the opacity of the primary image when hovering over it. This works fine, until someone hovers the arrow image on top - then it doesn't. How can I place a hover style on the secondary arrow image, which changes opacity of the primary image?
Thanks!
Try applying this css to your pseudo after-element:
pointer-events:none
You can add a wrapper, and to make hover for it, like this:
<div class='wrap'>
<div class='img'></div>
</div>
And, add style like this:
.wrap:hover + .img {
}
Related
I have a css transition who is perfectly working on hover but if we un-hover it at the end of the animation, at the left side of the button there is a piece of the :after who overflows the button. It looks like the animation is coming back to a square form without border-radius
Fiddle of my button: Fiddle
use overflow: hidden; in .loginBut
I want to make a blur effect in the background of a navbar component.
If I use a normal blur effect that exist on CSS core, it will not work like I want, so I want some help with this.
Examples:
Onthe first image, the panel section on the bottom has some "transparent background", but it is not opacity.
On the right side there is a navbar with that blur effect.
I tried to use CSS blur effect but it makes the menu items not readable.
It's done by a mix of setting opacity to the background color, and adding a blur filter.
For the example below, take a look at background:rgba(0,0,0,.7) and backdrop-filter: blur(5px).
For background color, you must use RBGA instead of hex. Adjust the .7 at the end to customize opacity. Similarly with blur filter, adjust the (5px) for intensity of blur.
.navbar {
background:rgba(0,0,0,.7);
backdrop-filter: blur(5px);
color:#fff;position:fixed;height:300px;width:500px}
img {position:fixed}
<img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<div class="navbar">
transparent black background
</div>
I have three divs, one hidden:
Parent
Message (hidden)
Image
I need to display Message when Image is hovered. That's usually a simple job, but I think the problem arises at the positioning of the divs.
I have an image at the upper right corner, and a text message should appear right next to it (to it's left, actually) when the image is hovered. Parent is a 100% x 32px bar, with position: fixed, so the icon and the message float around the whole page.
I've already tried plenty answers at SO. The only one that worked was using #parent:hover > div, but that makes the message show anytime the cursor hovers Parent, which is bad as Parent is a big invisible bar on the top of the page (should work well with shrinkwrapping, though, but I couldn't do it).
Here is the js fiddle. If you have any alternative approach please tell me.
EDIT: This is a example image of how it should work. It should also float and scroll with the page.
Switch the position of elements as mentioned in your style.
This is because you are using Adjascent Sibling selector +. “adjacent” means “immediately following,”
Demo
css
#img:hover + #msg {
display: block;
}
#Html Snippet
<div id="img">
<a href="some link here">
<img src="http://j.mp/18xsrJQ"/>
</a>
</div>
<div id="msg">
This should appear if icon is hovered.
</div>
To illustrate this:-
Consider this simple example :- To make the p immediately following the h3 tag appear in gray color. If you put p before h3 it wont work. That is how the Adjacent sibling selector works.
<h3>Hey, an H3 element</h3>
<p>Here's a paragraph which is short</p>
h3 +p {
color: gray;
}
I'm trying to get the bottom blue border to disappear on :active. The persistant border is tied to the background div but it's not going away when the hyperlink is active even though the hyperlink has no bottom border.
Here is a fiddle of the project:
http://jsfiddle.net/ajrdesign/cTKnn/5/
Anyone know why this background div is appearing above the other elements?
Figured it out. I had added border to the ul li element and not the li element. So the :hover and :active were simple adding another border on top of that one. Changed that and it worked great!
http://jsfiddle.net/ajrdesign/HgnwG/
Im trying to achieve a heading effect link on bbc: http://www.bbc.co.uk/
scroll down to most popular/whats on/explore
I'm after an effect where the heading is with text on the left and the arrow on the right.
and on hover both change color.
how can it be done so the heading fills the container and has the behaviour described?
thanks
You can use floats to make the arrow stick to the right side by floating it to the right
.arrow { float:right; }
For the color change you will need to change the contained elements when the mouse is hovered on the container
.container:hover .title, .container:hover .arrow { color:green; }
You can check my example here.
Update
Working with hyperlinks does not make it any different. All you have to do is wrap the two containers inside a hyperlink and then apply changes to the hyperlink like
http://jsfiddle.net/pZtGw/3/
The new html markup would look similar to this
<div class="container">
<a href="your_link_here">
<div class="title"> This is a title </div>
<div class="arrow"> > </div>
</a>
</div>
And instead of applying the color change to the two contained elements, we change the hyperlinks color property through our CSS flie
.container:hover a { color:green; }
http://jsfiddle.net/2yYyL/1/ here is an example on jsfiddle
what you want to do is add a sudo class of :hover on the wrapper and change the color of the text then have a have a sudo class of :hover on the parent element of a span like so
div:hover span{ background-image:url();}
so when you hover over the parent element it changes the background image of the child element