I found a strange issue while hovering over a div that took me some time to troubleshoot. I'm curious to why this happened to help myself and others in the future.
<div>
<img src="http://placehold.it/300x300" alt="" />
<h3>Smoooth</h3>
</div>
<div>
<h3>Janky</h3>
<img src="http://placehold.it/300x300" alt="" />
</div>
Essentially, hover over the first one i get the expected result. But when the h3 is before the image, it acts all janky.
codepen attached.
See the Pen zqZOPN by Mark Szymanski
Actually the bug is that the h3 is visible in the second version. It should be hidden behind the img since it comes before it in the DOM.
For some weird reason, if you change the opacity of the img to a value less that 1, the h3 disappears, as it should.
img {
display: block;
opacity: .99;
margin: 0;
-webkit-backface-visibility: hidden;
/* Chrome, Safari, Opera */
backface-visibility: hidden;
transition: opacity 200ms ease-in-out;
}
* {
box-sizing: border-box;
}
section {
width: 600px;
margin: 3em auto;
}
div {
float: left;
position: relative;
width: 48%;
margin: 1%;
background-color: dodgerblue;
overflow: hidden;
cursor: pointer;
}
img {
display: block;
opacity: .99;
margin: 0;
-webkit-backface-visibility: hidden;
/* Chrome, Safari, Opera */
backface-visibility: hidden;
transition: opacity 200ms ease-in-out;
}
h3 {
position: absolute;
z-index: 0;
top: 50%;
left: 15%;
text-align: center;
width: 70%;
background-color: dodgerblue;
color: #fff;
font-weight: 300;
padding: 1em;
transform: translateY(-75%);
-webkit-backface-visibility: hidden;
/* Chrome, Safari, Opera */
backface-visibility: hidden;
transition: background-color 200ms ease-in-out;
}
div:hover h3 {
background-color: transparent;
}
div:hover img {
opacity: 0.25;
}
<section>
<h4>Why does the h3 jump on hover when it's placed before the image in the mark-up?</h4>
<div>
<img src="http://placehold.it/300x300" alt="" />
<h3>Smoooth</h3>
</div>
<div>
<h3>Janky</h3>
<img src="http://placehold.it/300x300" alt="" />
</div>
</section>
And that is the reason of the flickering, because as soon as the img opacity changes to a value lower than 1, the h3 hides behind the img.
To solve your problem, you have to add z-index:1 to your h3 to force it to come in frond of the img
Related
How can I make a hidden element unhidden and transition?
Example:
I want to animate a <div> that has display: none; height: 0px; transition: height 600ms;.
So on click I add a class with display: block; height: 100px;.
The height does not animate.
CodePen
I would prefer a solution that uses transition, but if none is available I can use animation. I am not looking for any answers that use javascript.
You're not going to be able to animate it with display. If you give your .submenu class an overflow: hidden; and remove the display: none;, it will animate as desired since you're already animating the height from 0.
CSS
.submenu {
height: 0;
overflow: hidden; /* <-- Add This */
background: blue;
transition: height 600ms ease 0ms;
}
CodePen
$('.menu').click(function(){
$('.submenu').toggleClass('open');
});
.menu {
background: red;
position: fixed;
top: 0;
left: 0;
right: 0;
transition: all .2s ease-in-out;
}
.submenu {
height: 0;
overflow: hidden;
background: blue;
transition: height 600ms ease 0ms;
}
.submenu.open {
display: block;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<h1>Click me to expand a submenu</h1>
<div class="submenu">
<p>test 1</p>
<p>test 2</p>
</div>
</div>
I'm trying to emulate the hover effect you can see here:
http://www.timeout.com/newyork (When you hover on the articles.)
I understand how to make a div move on :hover, what I don't understand is how they've hidden the "read more" button until the div is hovered over.
Essentially I would like to know how to hide a div until mouse over, then have it slide out from under another.
Here is a pure CSS solution I quickly hacked up: CSS Hover Effect
h1, h2, h3, h4, h5{
margin:0px;
}
.tile{
overflow: hidden;
width: 400px;
height:350px;
}
.tile:hover > .body{
transition: all 0.5s ease;
top: -3em;
}
.body{
transition: all 0.5s ease;
background-color: #333;
margin:0px;
color: #fafafa;
padding: 1em;
position:relative;
top: -1em;
}
<div class="tile">
<img src="http://lorempixel.com/400/300">
<div class="body">
<h2>Test Header</h2>
<p>Info to display</p>
</div>
</div>
Basically, I just change the position of the text div when I hover over the main div and add a transition animation to it.
They coukd change the maxHeight ...
.read_more {
maxHeight: 2px;
overflow:hidden;
}
.read_more:hover {
maxHeight: 30px;
}
See if this simple example helps:
.main{
width: 300px;
height: 300px;
position: relative;
background:yellow;
overflow:hidden;
}
.hovered{
width: 100%;
height: 64px;
background: gray;
position: absolute;
bottom: -28px;
}
.hovered span{
background: red;
color: #fff;
display:block;
width: 100%;
padding: 5px 0;
}
.main:hover .hovered{
bottom: 0;
}
https://jsfiddle.net/4zak8bfp/
You can do it using some jQuery addClass() and removeClass() methods.
Here is an example:
HTML:
<div class="wrapper">
<div class="caption">
<H1>This is a title</H1>
<p>
This is sample contents...
</p>
<div class="read-more-wrapper">
Read More
</div>
</div>
</div>
CSS:
.wrapper{
position: relative;
width: 450px;
height: 250px;
background-color: #2f89ce;
overflow: hidden;
}
.caption{
display: block;
position: absolute;
bottom: -30px;
width: 100%;
height: auto;
background-color: #fff;
transition: all ease-in-out 0.3s;
}
.read-more-wrapper{
background-color: #d03134;
height: 30px;
}
.slidein{
bottom: 0;
transition: all ease-in-out 0.3s;
}
JQuery:
$('.wrapper').on('mouseenter', function(){
$(this).find('.caption').addClass("slidein");
}).on('mouseleave', function(){
$(this).find('.caption').removeClass('slidein');
});
Here is the fiddle:
https://jsfiddle.net/bk9x3ceo/2/
Hope that helps.
I have a "flippable" modal dialogue consisting of two divs (front and back):
<div class="modal-dialogue">
<div class="modal-content">
<div class="front">
<h1>Front</h1>
</div>
<div class="back">
<h1>Back</h1>
</div>
</div>
</div>
Using CSS transform I flip the modal over to reveal the back by adding the "flipped" class to the modal-content with:
.modal-content.flipped {
-webkit-transform: rotateY(180deg);
}
This all works fine... except when I add the overflow:hidden; property to the modal-content. Suddenly, the back div is not visible and instead the backface of the front div becomes visible (even though it has backface-visibility set to hidden).
This seems very strange. Why would setting the overflow property change the backface-visibility in this way?
You can see it in action in this fiddle: https://jsfiddle.net/amxp02mx/ . It works fine, but if you comment out line 31 in the CSS, making the overflow:hidden, it is broken.
Can anyone explain why?
document.querySelector(".modal-content")
.addEventListener("click", function () {
this.classList.toggle("flipped");
});
.modal-dialogue {
z-index: 1050;
display: block;
width: 25rem;
min-height: 30rem;
margin-left: -12.5rem;
margin-top: -15rem;
position: fixed;
left: 50%;
top: 50%;
-webkit-perspective: 800px;
}
.modal-content {
width: 25rem;
min-height: 30rem;
position: relative;
background-color: transparent;
border-radius: 10px;
outline: none;
transition: 0.8s ease;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
margin: 5rem auto 0 auto;
/* With overflow:hidden; the back of the panel is
not visible and the backface-visibility:hidden
stops working. Why? */
overflow: hidden;
/* With overflow: visible; it works fine. */
overflow: inherit;
}
.modal-content div {
display: block;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
color: white;
font-size: 140px;
font-weight: bold;
text-align: center;
overflow: hidden;
}
.modal-content .front {
background: red;
z-index:0;
}
.modal-content .back {
background: blue;
-webkit-transform: rotateY(180deg);
z-index:-1;
}
.modal-content.flipped {
-webkit-transform: rotateY(180deg);
}
<div class="modal-dialogue">
<div class="modal-content">
<div class="front">
<h1>Front</h1>
</div>
<div class="back">
<h1>Back</h1>
</div>
</div>
</div>
you can see the explanation here in the documentation:
https://drafts.csswg.org/css-transforms/#grouping-property-values
also your issue is easily fixed by adding
overflow:hidden;
to the .modal-content div rule
https://jsfiddle.net/amxp02mx/4/
EDIT: All sorted now. Thanks to everyone that helped! :)
I am having trouble centering an element of my website. It is 3 divs mixed together to form a hexagon.
I cannot center it.
HTML:
<li>
<div class="centerhex">
<a href="#">
<div class="hexa">
<div class="hexcontainer">
<div class="vertical-align">
<span class="hextext">Lorem Ipsum Dolor</span>
</div>
</div>
</div>
</a>
</div>
</li>
CSS:
.centerhex {
left: 50%;
margin: 0 auto;
width:210px;
height:300px;
}
.hexa {
width: 100%;
min-width: 200px;
height: 0;
padding-bottom: 57.7%;
margin-top: 65px;
background-color: #4a4a4a;
/*position: absolute;*/
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 18px;
border-radius: 4%/20%;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.hexa::before,
.hexa::after {
content:"";
display: block;
width: inherit;
height: inherit;
padding: inherit;
background: inherit;
z-index: 0;
position: absolute;
border-radius: inherit;
-moz-transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-o-transform:rotate(60deg);
-ms-transform:rotate(60deg);
}
.hexa::after {
-moz-transform:rotate(-60deg);
-webkit-transform:rotate(-60deg);
-o-transform:rotate(-60deg);
-ms-transform:rotate(-60deg);
}
.hexcontainer {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.vertical-align {
display: table;
height: 100%;
width: 100%;
}
Also, I need help so the bottom of the shape isn't cut off.
URL: http://jackmarshallphotography.co.uk/V1/donate.html
There are few things to change in your css, I worked directly on your website with the chrome developer tool, please find below the css to center the "tag" :
.servicebox {
position: absolute;
margin-top: -77px;
width: 100%;
}
.servicebox ul {
list-style: none;
width: 100%;
text-align: center;
}
.servicebox ul li {
margin-left: 12px;
}
.centerhex {
margin: auto;
width: 210px;
height: 300px;
}
Hope it helps.
For the second issue :
you need to edit the file hexagon.css and change the margin-top property find the right value: -65px or more (line 47)
Yoann
Let me see if I can help you with a simple example.
Have a fiddle - fiddle link!
Edit! - Here is another fiddle without absolute positioning... seems like this can be achieved without it - fiddle link - no absolute positioning
Absolute positioning example:
HTML
<div id="parentOfCentered">
<div id="perfectlyCentered"></div>
</div>
CSS
#parentOfCentered {
position: relative; /* Absolutely positioned children will be positioned in relation to the parent div */
background: #CCC;
width: 400px;
height: 400px;
}
#perfectlyCentered {
width: 200px;
height: 200px;
background: #000;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
/*
- negative top margin of half the height
- negative left margin of half the width
*/
}
I have an image and an overlay within an image wrapper. Hovering over the wrapper causes the overlay to go from transparency 0 to 0.8. It works in all browsers but IE. I believe I am using the proper IE filter for opacity. Please take a look at the code:
HTML
<div class="img-wrap">
<img class="profile" src="images/z.jpg">
</div>
CSS
.img-wrap {
margin-right: 3px;
float: left;
height: 100%;
overflow: hidden;
position: relative;
width: 250px;
}
.img-overlay {
text-decoration: none;
display: none;
height: 100%;
background-color: #000;
color: #fff;
opacity: 0;
filter: alpha(opacity = 0);
position: absolute;
width: 100%;
z-index: 100;
}
.img-overlay.team {
top: 0;
}
.img-wrap:hover .img-overlay {
display: block;
opacity: 0.80;
filter: alpha(opacity = 80);
transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-webkit-transition: opacity 0.25s;
}
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
this filter should work for ie 7-8