I'm working on a home page for a film company's website, and it has a CSS button with a hover effect that is going to open a lightbox once it's ready, at the moment I just have it set to href="#" as a placeholder until I'm ready to implement the lightbox. There is also a small image of a downward pointing arrow, with the link set to an anchor that isn't on the page yet. Both of these work in Firefox, but in Chrome the hover effect doesn't work on the button, and it behaves as if neither of these elements have anchor tags around them. I poked around with Chrome's dev tools and it seems as though the span around the button may be the culprit as Chrome seems to be resizing it, but I can't figure out any reason why the image link isn't working, and I'm not entirely sure why Chrome is disagreeing with the span.
The strange part is that there are three other CSS buttons with hover effects in a seperate div, and they all work just fine.
The website is currently uploaded at http://www.gruntwork.us/reelindi/test/
The style sheet can be found at http://www.gruntwork.us/reelindi/test/reelindi.css
CSS:
div.header {
position:absolute;
top: 0;
left: 0;
right: 0;
background-image:url("resources/images/bg.jpg");
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height:430px;
width:100%;
z-index: -1;
}
img.arrow {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 58px;
z-index: 999;
}
span.redBtn a {
text-align:center;
display:block;
margin: 0 auto;
width: 150px;
margin-top: -40px;
z-index: 999;
}
a.redBtn {
color: #fff;
background-color: #d94d4d;
font-size: 1.125em;
padding: 8px 18px;
text-decoration: none;
text-align: center;
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
-o-transition: all ease 1s;
-ms-transition: all ease 1s;
transition: all ease 1s;
border-radius: 5px;
}
a.redBtn:hover {
background-color: #bf3030;
}
HTML:
<div class="header">
<h1 class="header">Reel Indi</h1>
<h2 class="header">"Storytelling in motion."</h2><br>
<span class="redBtn">Push the red button!</span>
<img class="arrow" src="resources/images/arrow.png">
</div>
I've searched around but can't find an answer for this. Help?
Seems like your header's z-index: -1 rule pushes everything "behind" the body content, causing you not to be able to receive mouse events on that layer. Changing it to zero or higher will let you have hover effects and other events just fine.
Related
I've been trying everything I could find on SO. Nothing is working. What I want to do is very simple and easy. I'm only wanting to highlight/change background-color of a button when the cursor is hovering but the mouseover effect is not working, no matter what I try. I will try to reproduce the environment by giving custom CSS and HTML. I also host Bootstrap and jQuery locally (not CDN) and they are both included in index.html.
index.html
<section class="sectionscreen" id="splash">
<div class="col-md-12">
<div class="row">
<div class="form">
<div class="center-text-screen">
<a id="loginBtnHover" href="login.html" class="btn-link-screen btn" data-translate="log_in">Login</a>
</div>
</div>
</div>
</div>
</section>
css
html,
body {
margin: 0;
font-size: 100%;
font-family: 'Lato', sans-serif;
background: #fff;
width:100%;
height:100%;
}
body a {
text-decoration: none;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
font-family: 'Lato', sans-serif;
}
body {
font: 1.3rem/1 "Avenir LT W02 45 Book",sans-serif;
color: #5c5c5f;
}
body img {
max-width: 100%;
}
a{
text-decoration: none;
color: inherit !important;
}
a:hover{
text-decoration: none !important;
}
#splash{
background-image: url("../images/splash.png"); /* The image used */
background-color: whitesmoke; /* Used if the image is unavailable */
height: 100%; /* You must set a specified height */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover; /* Resize the background image to cover the entire container */
text-align: center;
padding: 2.5%;
}
.center-text-screen{
display:grid;
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 100%; /* Need a specific value to work */
/*height:200px !important;*/
bottom:8% !important;
color: #302b70;
}
.btn-link-screen{
background:#d9d9d9;
margin-bottom:1.5% !important;
width: 170px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
border-radius:50px !important;
color:#a6a6a6 !important;
}
This does not work :
.btn-link-screen:hover{
background-color:gold !important
}
Only works when computer is not connected to the internet, otherwise does NOT work
.center-text-screen .btn-link-screen:hover{
background-color:gold !important;//works when not connected to internet
}
OR
.center-text-screen a:hover{
background-color:gold !important;//works when not connected to internet
}
Does not work
#splash .center-text-screen .btn-link-screen:hover
does not work
#splash .btn-link-screen:hover
does not work
#splash a:hover
What am I doing wrong and how can I debug this?
Well, somewhere somehow, your styles are being overwritten by others in the cascade, which means your CSS is being read before the rules you're trying to rewrite. That's all that's happening.
First thing to check: make sure your stylesheet positioned after Bootstrap in your HTML.
If that's not it, which version of Bootstrap are you using?
Also, I notice you have an id there - loginBtnHover - have you tried that? That ID gives you a lot of specificity to target that element. An ID will supercede class rules.
Debugging hover states is available in every modern browser. I could try to describe where the button is to do this, but I think it would be faster/easier to find a YouTube on it for your browser of choice. But you can do it - there are options to toggle :hover, :focus, :active, etc in this menu, and it is very helpful.
I am currently trying to make an animation with a welcome message. I want it to be placed in the verticalmiddle of my div. I transform it from a big font to a small font and it seems like the big fonts height is still affecting the positioning or am I wrong?
#barbar{
height:10%;
width: 100%;
background-color:rgba(79, 79, 90, 0.92);
bottom: 0;
position: fixed;
z-index: 3;
}
.hello{
color: black;
font-family: "Times New Roman";
text-align: center;
animation: ease;
animation-name: gas;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-duration:2s;
position: fixed;
font-size: 100px;
bottom: 700px;
margin-left: -20%;
white-space: nowrap;
}
#keyframes gas{
from { font-size: 500px; bottom: 700px; margin-left: -20%;}
to { font-size: 12px; bottom: 0; margin-left: 15%;}
}
<div id = "barbar">
<h3 class ='hello'> Welocme User </h3>
</div>
As you can see my h3 is inside the div but it still somehow doesn't end up where I want it to be placed. to bottom:-x% is not the soulution im looking for.
Add "margin-bottom: 0;" to your h3 tag.
By default, the browser adds a margin of 1em to h3 elements. Since the "em" unit is relative to font-size, when you add "font-size: 100px" to your element you also get 100px of margin.
I suggest using a CSS reset. It will clear all the browser's defaults, preventing it to add unwanted styles on your page. It also makes sure that your page will look exactly the same in all browsers since different browsers use different defaults. I suggest using meyerweb reset on all your pages.
I'm trying to build a gallery where every image has a hover effect (this one). When I jhover the image and click the link inside , a bootstrap modal opens showing some content.
Until here works fine, however, when I close this modal, the image is not displaying properly in the main page. You can see my problem here:
http://www.bootply.com/90dGFlCrxI
Can anyone explain me what am I doing wrong?
Thanks very much guys!
The issue seems be the
overflow: hidden;
in this css rule:
.effect figure {
margin: 0;
position: relative;
/*overflow: hidden;*/
text-align: left;
}
if you remove the issue is fixed.
another work around:
.effect figcaption {
position: absolute;
width: 100%;
left: 0;
padding: 7px;
background: #26BC8A;
color: #ed4e6e;
height: 50px;
top: auto;
bottom: 0;
opacity: 0;
/* transform: translateY(100%); */
/* transition: transform 0.4s, opacity 0.1s 0.3s; */
}
the translateY is not working as expected.
I have an image gallery sliding images in an out only with css.
See http://codepen.io/anon/pen/xmhzE?editors=110 for the example or the attached code.
It works fine as long as the #images-div does not have overflow: hidden set. When overflow is set to hidden, the absolute positioning of the single images does not work anymore. When I use negative values for the left-property of the images it also works with overflow hidden.
Does overflow:hidden change the way how absolute children are layouted?
Does anyone has a solution to this problem?
Sources
index.html:
<div id="images">
<img id="image1" src="http://i.imgur.com/dL3io.jpg" />
<img id="image2" src="http://i.imgur.com/qASVX.jpg" />
<img id="image3" src="http://i.imgur.com/fLuHO.jpg" />
<img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" />
</div>
<div id="slider">
1
2
3
4
</div>
base.css:
body {
text-align: center;
}
#images {
width: 400px;
height: 250px;
/*overflow: hidden; if this is set absolute positioning of images breaks*/
position: relative;
background-color: red;
margin: 20px auto;
}
#images img {
width: 400px;
height: 250px;
display: block;
position: absolute;
top: 0px;
left: 400px;
z-index: 1;
opacity: 0;
transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
}
#images img:target {
top: 0px;
left: 0px;
z-index: 9;
opacity: 1;
}
#slider a {
text-decoration: none;
background: #E3F1FA;
border: 1px solid #C6E4F2;
padding: 4px 6px;
color: #222;
}
#slider a:hover {
background: #C6E4F2;
}
This puzzle kept me going. I just couldn't leave it be.
So last evening I was fiddling with it, but couldn't fix it (untill just yet :) ).
Testcase 1
While simplifying things I removed the opacity from the image-elements and left only 1 image and one link. I've set the image to 390px initially so that I can make sure that it is at that position (you can see just a little bit of the left of it).
http://codepen.io/anon/pen/tpCrc
Conclusion:
So what's important to notice is that fact that the image initially is there where it should be.
Then when clicking button 1 you can see it simply skips the transition.
So the browser doesn't change the position of the element, because of overflow:hidden (like the title of this post suggests). It goes to the position mentioned in the CSS (in the :target part), but without the transition.
Testcase 2
Then I got wondering why the browser would act that way and I kept thinking that maybe the focussing of the image element had something to do with it.
If you think about it: when clicking one of the buttons you add #target to the URL of the page and browser then tries to "scroll" to that element. To that, that element has to be visisble.
So I wondered: maybe the CSS has nothing to do with it. Let's try:
so I completely removed the :target-part and the transitions.
http://codepen.io/anon/pen/IvfBE
Conclusion:
Wow! What do we see there? When clicking one of the buttons the image still jumps to left:0 !!
I think we got a lead there.
Still though, I didn't know how to actually fix that. Still seems like a browser-bug to me.
The fix
Then - after a good night of sleep - I woke up with a fresh new idea.
What if we don't actually target the element we want to transition?
So I added a container to each image-element and target that instead.
<div id="images">
<div id="img1container"><img id="image1" src="http://i.imgur.com/dL3io.jpg" /></div>
<div id="img2container"><img id="image2" src="http://i.imgur.com/qASVX.jpg" /></div>
<div id="img3container"><img id="image3" src="http://i.imgur.com/fLuHO.jpg" /></div>
<div id="img4container"><img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" /></div>
</div>
<div id="slider">
1
2
3
4
</div>
In the CSS the position of the image now has to be changed by "[parentElement]:target img" instead.
body {
text-align: center;
}
#images {
width: 400px;
height: 250px;
overflow: hidden; /* this did break it in the past ;) */
position: relative;
background-color: red;
margin: 20px auto;
}
#images img {
width: 400px;
height: 250px;
display: block;
position: absolute;
top: 0px;
left: 400px;
z-index: 1;
opacity: 0;
transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
}
#images div:target img {
top: 0px;
left: 0px;
z-index: 9;
opacity: 1;
}
#slider a {
text-decoration: none;
background: #E3F1FA;
border: 1px solid #C6E4F2;
padding: 4px 6px;
color: #222;
}
#slider a:hover {
background: #C6E4F2;
}
And the working example:
http://codepen.io/anon/pen/lyzhi
Conclusion:
Yay!! Indeed, by not putting focus on the element you want to transition, it doesn't break.
So, you've got your fix there, but it still seems like a browser/engine-bug to me.
So I'd suggest you create a bugreport somewhere (if you've got time).
BTW: I've tested this in Chrome and IE - both the latest versions only. You might want to test this in Firefox and maybe some other browsers.
I am currently running into a problem when trying to implement a simple rollover using CSS :after and :hover pseudo-elements.
Have a look at the clock and facebook icons to the right: http://clean.philippchristoph.de/
Here's the CSS code:
.icon {
background: url('../img/clock_icon.png') top left no-repeat;
width: 25px;
height: 25px;
}
.icon:after {
.transition(opacity, .2s, ease);
content: " ";
position: absolute;
top: 4px; left: 5px; bottom: 0; right: 0;
background: url('../img/clock_icon.png') no-repeat;
background-position: -25px 0;
opacity: 0;
}
.icon:hover:after, .clock:hover div {
opacity: 1;
}
As you can see, the image is faded using a sprite and opacity. However, now I can't seem to hover both elements anymore. As you will see on the example page, you can hover over the facebook icon, but not over the clock. If you remove the facebook icon, you can hover over the clock again. Note that the two icons are entirely seperate elements.
I've tested this behavior on both FF and Chrome on Windows.
It'd be awesome if someone could shed some light onto this issue.. :)
Replace your CSS with this one (I mean the mentioned classes only, not your entire CSS :) ):
.icon {
background: url("../img/clock_icon.png") no-repeat scroll left top transparent;
height: 25px;
width: 25px;
position: relative
}
.icon:after {
-moz-transition: opacity 0.2s ease 0s;
background: url("../img/clock_icon.png") no-repeat scroll -25px 0pt transparent;
bottom: 0pt;
content: " ";
left: 0;
opacity: 0;
position: absolute;
right: 0pt;
top: 0;
}
.icon:hover:after, .clock:hover div {
opacity: 1;
}
.facebook, .facebook:after {
background-image: url("../img/facebook_icon.png");
}
.clock {
position: relative
}
.clock div {
-moz-transition: opacity 0.2s ease 0s;
color: #A0A0A0;
font-size: 12px;
left: 40px;
line-height: 11px;
opacity: 0;
position: absolute;
top: 5px;
width: 160px
}
You need to add position: relative to your icon class, so that the generated content is positioned relative to that, rather than the parent. I've tried to simplify what you have in a fiddle, though I wasn't 100% sure what you are after. Is that close? I also amended the positioning of the generated content.
It's worth noting that - annoyingly - you can't apply a transition to generated content (which is why any attempt to have the opacity transition on these elements will fail in your case). Hopefully this will change soon.