I currently have a fixed div that acts as a search bar on the top of a page, and then tile-like divs in a container div for movie posters that change opacity when moused over. However, if one of these movie poster divs are partially hidden by the search bar div they appear on top of the search bar div like so:
Is there a way to prevent this but keep the opacity change on the part that is visible?
.poster
{
float: left;
margin-left: 10px;
margin-top: 10px;
padding: 2px;
cursor: pointer;
opacity: 1;
transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-webkit-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
}
.poster:hover
{
opacity: 0.65;
}
The div the gray bar and the div the input box are in have this to keep them from scrolling with the page:
position: fixed;
You can use the z-index property to set one div above the other. The higher z-index number will be displayed above the lower z-index number.
Related
this question might be obvious but i'm new in css.
I'm animating a shape so when you hover it, it stretches. I've completed the hover on with a nice ease transition but when you move off the mouse the transition doesn't work. Is there a way to make it happen also in the hover off moment?
.shape1{
position: absolute;
background:red
top:512px;
width:180px;
height:140px;
}
.shape1:hover {
height: 160px;
top:492px;
transition: 0.2s ease;
}
Your answer
You have added the transition property on the hover state of the element. Therefore the transition is not applied when you leave the cursor from the element.
.shape1{
position: absolute;
background: red;
top: 512px;
width: 180px;
height: 140px;
transition: .2s ease; /* move this here from :hover */
}
Further information
Besides this you can also add specific properties to the transition. For example, if you only want the height to be animated you could it like this:
.shape1 {
transition: height .2s ease;
/* this inly affects height, nothing else */
}
You can even define different transition-times for each property:
.shape1 {
transition: height .2s ease, background-color .5s linear;
/* stacking transitions is easy */
}
Add the transition before the :hover, so the transition always applies
.shape1 {
transition: 0.2s ease;
}
The :hover selector is used to select elements when you mouse over them.
W3Schools
When you add also transition to your shape1 class it should works
I have a site (http://sheisbiddy.com/the-f-word/) where the Read More link jumps when you hover your mouse over it. It only started happening when I added padding to it to make it the same size as the box below. Here's the CSS:
a.more-link {display:block; text-align: center; color:#e9bdd8; text-transform:uppercase; font-size:85%; position: relative; bottom: 5px;}
a.more-link:hover {background-color:white;padding-top:10px; padding-bottom:10px;transition: color, background-color 0.1s linear; -moz-transition: color, background-color 0.1s linear; -webkit-transition: color, background-color 0.2s linear; -o-transition: color, background-color 0.1s linear;}
I'm using Safari if that makes a difference.
Well, when you hover, you're adding 10px of padding on the top and bottom that aren't there in the standard style. Try removing these elements from hover
padding-top:10px; padding-bottom:10px;
That, or you'll want to add this padding to your other style.
You want the padding to be a part of your un:hoverd selector. That way applying the padding only upon hovering doesn't add any size to the link.
a.more-link {padding 10px 0;}
Alternatively, since you're already using transitions you can add a padding transition to make the "jump" animated.
a.more-link { transition: padding 0.2s linear; }
Depending on how you want, you could add the padding to the base class like so :
https://jsfiddle.net/78s24fpw/
a.more-link { padding-top:10px; padding-bottom:10px;display:block; text-align: center; color:#e9bdd8; text-transform:uppercase; font-size:85%; position: relative; bottom: 5px;}
a.more-link:hover {background-color:white;padding-top:10px; padding-bottom:10px;transition: color, background-color 0.1s linear; -moz-transition:
I am trying to scale up a linked image and reduce the opacity on hover. I have the image in a container to make it a circle with border-radius and the container has overflow set to hidden. I have everything working except that when I hover, the full image appears for a brief second before the overflow is hidden again. Here is a codepen mockup: http://codepen.io/jphogan/pen/WbxKJG
I have tried a few of the solutions I've found on here including setting the image to display:block. I've also tried setting the background color and overflow hidden to the container rather than the link, but I had the same result. I tried adding overflow hidden to the image itself, though unsurprisingly that did nothing. I just need the excess of the image to stay hidden throughout the transition.
Here is the CSS the way I have it set up now, although I've gone through a number of iterations to try and solve this. I appreciate any help. Thanks!
.solutions_role_container {
text-align:center;
}
.role_img_container {
width: 70%;
margin: 0 auto;
}
a.solutions_role_image {
background:#000;
border-radius: 50%;
overflow: hidden;
display: block;
border: 1px solid #B1C3DA;
box-shadow: 0 4px 10px #C6C6C6;
}
.solutions_role_image img {
width:100%;
-moz-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
-o-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
display:block;
overflow:hidden;
transform:scale(1);
}
a.solutions_role_image:hover img {
opacity:0.7;
transform:scale(1.08);
}
Add these rules to role_img_container:
border-radius: 50%;
overflow: hidden;
z-index: 2;
position: relative;
The a and img tags should no longer need any css for overflow or border radius. You could add z-index: 1 to solutions_role_img just to be safe, but I don't think it is necessary
First stackoverflow post, so please forgive if I'm missing something obvious. I did search for an answer first but didn't find one I recognized as relevant.
In this jsfiddle, I have a div that I'm using as a hover target to get some transitions to happen to an <a> element.
http://jsfiddle.net/ramatsu/Q9rfg/
Here's the markup:
<div class="target">Target
<p>.LightMe</p>
</div>
And the css:
body {
background-color: #099;
height: 100%;
width: 100%;
margin-top:200px;
}
.target{
position: absolute;
left: 40%;
height: 100px;
width: 200px;
padding: 20px;
background-color: #ccc;
cursor: pointer;
}
a {
display: block;
position: relative;
padding: 1px;
border-radius: 15%;
}
a.LightMe {
/*Starting state */
background-color: white;
border-style:solid;
border-color:#fff;
top: -120px;
left: -200px;
height: 80px;
width: 80px;
z-index: 10;
opacity: 0;
transition:left 0.55s ease, opacity .5s .7s ease;
-webkit-transition:left 0.55s ease, opacity .5s .7s ease;
-o-transition:left 0.55s ease, opacity .5s .7s ease;
}
.target:hover a.LightMe {
/*Ending state*/
left: 80px;
opacity: 1;
transition:left 0.55s .7s ease, opacity .5s ease;
-webkit-transition:left 0.55s .7s ease, opacity .5s ease;
-o-transition:left 0.55s .7s ease, opacity .5s ease;
}
.target:hover {
transition: background-color 500ms ease;
-webkit-background-color 500ms ease;
-o-background-color 500ms ease;
background-color:#999;
}
Hover over the grey box labeled Target and back off again to see the transitions on the <a> element. It's doing what I want: opacity fades in during position delay, then it slides to the desired position. when moving out of the hover target, the <a> slides to it's original position, then opacity fades back out. All good so far.
The catch is, if the user hovers over the hidden <a> element, it triggers the same set of transitions, which causes all kinds of unintended havoc.
I'd like to prevent any response to a hover directly over the <a> element, and really like to continue to keep it in css if possible.
I tried adding an explicit hover to <a> and .LightMe to override this, to no avail. (Though that could be that I just didn't get the selector syntax right.)
I added the background-color transition to .target intentionally for testing, and it provided an interesting clue: hovering over the <a> triggers the upstream transitions of the .target div. That's about where my brain broke and I decided I'd better seek help.
I'm working with a few things here that are above my head, I just started from the closest thing I could find and worked toward what I needed. This was the starting point jsfiddle (with thanks to the author):
You can start your 'top' position outside of the viewer port and delay the 'top' transition until after your 'left' transition is over. That way the <a> element will not be clickable until the left transition start.
See: http://jsfiddle.net/Q9rfg/4/
Or you can also use this method, combined with the sibling selector as suggested by aorcsik.
Update: another hacky solution is to place a div which is outside, the hover sensitive element, that covers the moving link. Check it out: http://jsfiddle.net/aorcsik/Q9rfg/2/
The problem with my original idea (below) was, that you could not click on the moving link, since it returned to its original position, once you hovered out of the gray box, also the cursor changed over the hidden link.
I would try to get the <a> out of the gray box, put it after, and reference it in css with the sibling selector +.
.mainclass.subclass:hover + a.LightMe {
/* ... */
}
This way it won't trigger the hover effect of the gray box when itself is hovered, and you stay in pure css land.
This would make positioning a bit trickier, here is a fiddle, check it out: http://jsfiddle.net/aorcsik/Q9rfg/1/
I have a sprite image with the controls of my slideshow.
I want to change the background position of each control when user hovers over it, so that it looks active.
I am using:
-moz-transition: background-position 0.45s linear;
-webkit-transition: background-position 0.45s linear;
-o-transition: background-position 0.45s linear;
My code is in this fiddle (apparently the bg image is not my controls but a random image).
I want the transition effect to be what someone would expect when hovering over an item (fade maybe), and not the current one that looks like the bg image actually moves.
Any ideas?
One way you could accomplish this is by placing a hidden span inside your anchor tag with the background-position set to display the area of the sprite you want to show on hover. Initially this span would be hidden with a 0 opacity.
Then, on hover, instead of transitioning the background-position you could transition the opacity to fade it in.
The code would look something like this:
html
<a><span></span></a>
css
a {
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
background-image: url("http://example.com/somepic.jpg");
}
a span {
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
background-image: url("http://example.com/somepic.jpg");
background-position: 150px 210px;
opacity: 0;
-moz-transition: opacity 0.45s;
-webkit-transition: opacity 0.45s;
-o-transition: opacity 0.45s;
}
a:hover span {
opacity: 1;
}
You can demo this at http://jsfiddle.net/hespb/5/
Your code changes the background position.
background-position: 150px 210px;
To make it face you need to change the background color, add opacity and animate it.
background: rgba(255,255,255,0);