Basically I have a dynamic image with stacking of another image/"effect" on top.
That part is working fine.
But when I go to span:hover + div for a user options area on top of the combined images it mostly works with the hover affect, but the hovered item seems to flash on mouseover.
<!DOCTYPE html>
<html>
<head>
<style>
.stack {
position: absolute;
left: 5px;
top: 5px;
width: 100px;
height: 100px;
z-index: -2;
}
div {
width: 110px;
height: 110px;
align-items: center;
top: 5px;
display: none;
}
span:hover + div {
display: block;
}
</style>
</head>
<body>
<table border="0">
<tr>
<td class='#jail' style='position:relative'>
<span><img src='/{$ir['display_pic']}' class='stack'>
<img src='/overlay.png' class='stack'>
</span>
<div>
<center>
<a href='http://'>Option 1</a>
<br />
<a href='http://'>Option 2</a>
</center>
</div>
</td>
</tr>
</table>
</body>
</html>
Here is what I think you are asking for. It's a fade in on hover.
Note the changes I removed
span:hover + div {
display: block;
}
and replaced it with the class .hovered and .hovered:hover
Hope this helps,
Tim
.stack {
position: absolute;
left: 5px;
top: 5px;
width: 100px;
height: 100px;
z-index: -2;
}
.hovered {
width: 110px;
height: 110px;
align-items: center;
top: 5px;
display:block;
opacity: 0;
}
.hovered:hover {
opacity: 1;
transition: opacity 0.5s ease-in; /* vendorless fallback */
-o-transition: opacity 0.5s ease-in; /* Opera */
-ms-transition: opacity 0.5s ease-in; /* IE 10 */
-moz-transition: opacity 0.5s ease-in; /* Firefox */
-webkit-transition: opacity 0.5s ease-in; /* Safari & Chrome */
}
<table border="0">
<tr>
<td class='#jail' style='position:relative'>
<span><img src='<img src="http://placehold.it/350x150/ff0000">' class='stack'>
<img src='<img src="http://placehold.it/350x150/00ff00">' class='stack'>
</span>
<div class="hovered">
<center>
<a href='http://'>Option 1</a>
<br />
<a href='http://'>Option 2</a>
</center>
</div>
</td>
</tr>
</table>
Related
I'm am facing this problem. I'd like to have a field of divs align next to each other. When the user hovers over the div, the div changes its background-color and gets bigger. With that, it should also be over the divs next to it. But it doesn't do that on one side.
I tried it with different aproaches, like setting the z-index from .thin to 1000 and the one from .thin:hover to 1200 and also tried to change the position to absolute, which made it be over the other ones but floating on the left side.
body {
margin: 0px;
padding: 20px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
z-index: -1;
position:relative;
}
.tiles{
width: 100%;
height: 100%;
align-content: center;
}
.thin {
width: 150px;
height: 150px;
background-color: #EFF0F1;
margin: 3px;
float: left;
border-radius: 3px;
display: table;
}
.thin:hover {
width: 190px;
height: 190px;
background-color: #01A3EE;
margin: -13px;
float: left;
border-radius: 3px;
-webkit-transition: background-color 300ms linear, margin 600ms linear, width 600ms linear, height 600ms linear;
-ms-transition: background-color 300ms linear, margin 600ms linear, width 600ms linear, height 600ms linear;
transition: background-color 300ms linear, margin 600ms linear, width 600ms linear, height 600ms linear;
}
p {
text-align: center;
vertical-align: middle;
display: table-cell;
}
<html>
<head>
<base target="_parent">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
<title></title>
<meta>
<meta>
</head>
<body onfocusout="" style="" onload="">
<div id="" class="tiles">
<div id="" class="thin">
<p id="">Residential Property</p>
</div>
<div id="" class="thin">
<p id="">Sales Lead</p>
</div>
<div id="" class="thin">
<p id="">Sales Opportunity</p>
</div>
<div id="" class="thin">
<p id="">Purchase Lead</p>
</div>
<div id="" class="thin">
<p id="">Purchase Opportunity</p>
</div>
</div>
</body>
</html>
So how can i make the div overlap the surrounding divs without moving the div to a different location.
I hope, someone can help with my problem. Thank you very much.
Here is working example: JsFiddle
.container {
display: flex;
}
.item {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background: #ccc;
cursor: pointer;
margin: 5px;
transition: all .4s;
}
.item:hover {
background-color: tomato;
transform: scale(1.3);
}
<div class="container">
<div class="item">
some text
</div>
<div class="item">
some text
</div>
<div class="item">
some text
</div>
<div class="item">
some text
</div>
</div>
z-index only works on positioned elements - below I have made your box relative and added a higher z-index to the hover
The only way to make the elements not move when hovered is to use a transform and scale them, instead of changing their physical width and height.
body {
margin: 0px;
padding: 20px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
}
.tiles {
width: 100%;
height: 100%;
align-content: center;
}
.thin {
width: 150px;
height: 150px;
background-color: #EFF0F1;
margin: 3px;
float: left;
border-radius: 3px;
display: table;
/* added below 2 lines */
z-index: 1;
position: relative;
}
.thin:hover {
background-color: #01A3EE;
transform: scale(1.2); /* change the width and height to a scale transformation so element doesn't move on resize, also no need to repeat items declared in .thin, unless you need to override them */
z-index: 2; /* add this */
-webkit-transition: background-color 300ms linear, transform 600ms linear;
-ms-transition: background-color 300ms linear, transform 600ms linear;
transition: background-color 300ms linear, transform 600ms linear;
}
p {
text-align: center;
vertical-align: middle;
display: table-cell;
}
<html>
<head>
<base target="_parent">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
<title></title>
<meta>
<meta>
</head>
<body onfocusout="" style="" onload="">
<div id="" class="tiles">
<div id="" class="thin">
<p id="">Residential Property</p>
</div>
<div id="" class="thin">
<p id="">Sales Lead</p>
</div>
<div id="" class="thin">
<p id="">Sales Opportunity</p>
</div>
<div id="" class="thin">
<p id="">Purchase Lead</p>
</div>
<div id="" class="thin">
<p id="">Purchase Opportunity</p>
</div>
</div>
</body>
</html>
I think you can use scale(1.1); grow the div, it is the much simpler way to do the needful. You only need to update the CSS of :hover
.thin:hover {
transform: scale(1.1);
background-color: #01A3EE;
float: left;
border-radius: 3px;
transition: all 0.3s linear;
}
Okay so I have been doing some renovations to my website and I am trying to make it so on the home page you see several images and what I want to happen is that when you hover over the image it blurs and and text appears in the center of the image. I've been able to make the images blur but the thing is is that all the tutorials and Q&A on Forums that I've found use absolute positioning.
When I do that though I end up with all the images stacked on top of each other. I then put divs around each image and made the images relatively positioned. The result was the same. I checked my code in validators and it came out with no errors. I could really need some help.
Here is my current setup (the images are where I want them and they blur on hover)
https://jsfiddle.net/u9smc561/
Here is my HTML
<!-- title div -->
<div id="head">
<img src=http://www.mem3500films.minksfamily.com/pic/title.png alt="title" class="M35F">
</div>
<!-- menu bar line for anything bigger than 800px -->
<div class="menuBar line">
<img class='menu home' src=http://www.mem3500films.minksfamily.com/pic/home.png alt="Home" onclick="window.location='index.html';">
<img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
<img class='menu about' src=http://www.mem3500films.minksfamily.com/pic/about.jpg alt="About" onclick="window.location='About.html';">
<img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
<img class='menu comment' src=http://www.mem3500films.minksfamily.com/pic/comment.jpg alt="Comments" onclick="window.location='Comments.html';">
<img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
<img class='menu pic' src=http://www.mem3500films.minksfamily.com/pic/pic.png alt="Pictures" onclick="window.location='Pictures.html';">
<img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
<img class='menu active' src=http://www.mem3500films.minksfamily.com/pic/active.png alt="Activities" onclick="window.location='games.html';">
<img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
</div>
<!-- menu bar line for anything smaller than 800px -->
<div class="smenuBar" style="font-size: 2px;">
<nav>
<ul>
<li class="line">
<img class='menuPic menu' src=http://www.mem3500films.minksfamily.com/pic/mobileMenu.png alt="Menu">
<ul class="selector">
<li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/home.png alt="Home" onclick="window.location='index.html';"></li>
<li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/about.jpg alt="About" onclick="window.location='About.html';"></li>
<li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/comment.jpg alt="Comments" onclick="window.location='Comments.html';"></li>
<li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/pic.png alt="Pictures" onclick="window.location='Pictures.html';"></li>
<li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/active.png alt="Activities" onclick="window.location='games.html';"></li>
</ul>
</li>
<li class="close">
<img src=http://www.mem3500films.minksfamily.com/pic/close.png alt="Close" style="margin-top: 5px;">
</li>
</ul>
</nav>
</div>
<!-- Explanation area -->
<br>
<br>MEM 3500 Films is a collection of stop-motion animated videos.
<br>To learn more about MEM 3500 Films check out the About Page.
<br>Just click on the movie poster to go to that movies page where you can watch it.
<!-- main div section with the posters -->
<div style="margin-left:0%; margin-right:0%; width:100%; text-align:left;font-size: 25px">
<br>
<br>
<div class="left">
<img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/tcb.png alt="The Coffee Break" />
<br>
<img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/tvsr.png alt="tvsr" />
<br>
<img class="poster" src=http://www.mem3500films.minksfamily.com/pic/lt.james.png alt="Lt. James">
<br>
<img class="poster" src=http://www.mem3500films.minksfamily.com/pic/TRR.jpg alt="The robbers race">
<br>
<img class="poster" src=http://www.mem3500films.minksfamily.com/pic/TFP.jpg alt="The French Plane">
</div>
<div class="right">
<img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/MKI6.png alt="MKI6" />
<br>
<img class="poster" src=http://www.mem3500films.minksfamily.com/pic/TPSPoster.png alt="tps">
<br>
<img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/ag.jpg alt="The Air-to-Ground Attack">
<br>
<img class="poster" src=http://www.mem3500films.minksfamily.com/pic/tcp.jpg alt="The Counterfeiters">
<br>
<img class="poster" src=http://www.mem3500films.minksfamily.com/pic/mem3500films.jpg alt="mem 3500 films">
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<!-- footer credits -->
<div style="width:100%; text-align:center; font-size: 25px;">
<br>
<footer style="">LEGO, the LEGO logo, and the Minifigure are trademarks and/or copyrights of the LEGO Group. I am not supported by LEGO or in any way is this website. Check out the LEGO website for more cool stuff. LEGO.com
<br>
<p style="margin: 0;">
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0; width:88px; height:31px; margin: 10px;" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" />
</a>
</p>
</footer>
</div>
And my CSS
/* makes the stuff for the tall posters */
.poster {
-webkit-transition: -webkit-filter 0.4s;
-moz-transition: -webkit-filter 0.4s;
-ms-transition: -webkit-filter 0.4s;
-o-transition: -webkit-filter 0.4s;
transition: -webkit-filter 0.4s;
width: 100%;
border-radius: 15px;
max-width: 450px;
max-height: 601px;
}
.poster:hover{
-webkit-filter: blur(7px);
filter: blur(7px);
}
/* makes the stuff for the wide posters */
.poster1 {
-webkit-transition: -webkit-filter 0.3s;
-moz-transition: -webkit-filter 0.3s;
-ms-transition: -webkit-filter 0.3s;
-o-transition: -webkit-filter 0.3s;
transition: -webkit-filter 0.3s;
width: 100%;
border-radius: 15px;
max-width: 450px;
max-height: 260px;
}
.poster1:hover{
-webkit-filter: blur(7px);
filter: blur(7px);
}
/* the main div holders for the posters */
.left {
width: 49%;
display: inline-block;
margin-left: 1px;
text-align: right;
}
.right {
width: 49%;
display: inline-block;
margin-right: 0px;
text-align: left;
}
/* the menu bar stuff */
#media only screen
and (min-width : 801px) {
.menuBar {
display: block;
}
.smenuBar, .close{
display: none;
}
/* makes sure the buttons are not to big */
.home {
width: 10.1%;
max-width: 107px;
}
.about {
width: 11.1%;
max-width: 117px;
}
.comment {
width: 16.7%;
max-width: 173px;
}
.pic {
width: 16.8%;
max-width: 174px;
}
.active {
width: 16.1%;
max-width: 167px;
}
.blank {
width: 1%;
max-width: 3px;
max-height: 25px;
margin-top: 10px;
margin-bottom: 10px;
}
/* makes the hover effect for the menu buttons */
.menu {
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
-webkit-transition: -webkit-filter 0.5s; /* Safari */
-moz-transition: -webkit-filter 0.5s;
-ms-transition: -webkit-filter 0.5s;
-o-transition: -webkit-filter 0.5s;
transition: -webkit-filter 0.5s;
}
.menu:hover {
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
-webkit-filter: invert(1); /* Safari */
-moz-filter: invert(1);
-ms-filter: invert(1);
-o-filter: invert(1);
filter: invert(1);
}
}
/* end of computer menu bar config */
/* start of mobile menu config */
#media only screen
and (max-width : 800px) {
/* stuff to make sure the other menu doesn't show */
.menuBar {
display: none;
}
.smenuBar, .close {
display: block;
}
.menuPic {
width: 90%;
max-width: 143px;
}
/* stuff to make sure there isn't indenting */
li {
list-style-type: none;
padding: 0;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/* drop down part of the menu stuff */
nav ul ul {
height: 0px;
overflow: hidden;
-webkit-transition: height 0.5s; /* Safari */
-moz-transition: height 0.5s;
-ms-transition: height 0.5s;
-o-transition: height 0.5s;
transition: height 0.5s;
}
nav ul .line:hover > ul {
height: 335px;
}
nav ul .line:active > ul {
height: 335px;
}
nav ul .line:hover + .close {
height: 52px;
}
nav ul .line:active + .cose {
height: 52px;
}
.close {
text-align: center;
background:rgba(0,0,0,0.8);
height: 0px;
overflow: hidden;
-webkit-transition: all 0.5s; /* Safari */
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
/* makes the hover effect for the menu buttons */
.menu {
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
-webkit-transition: -webkit-filter 0.5s; /* Safari */
-moz-transition: -webkit-filter 0.5s;
-ms-transition: -webkit-filter 0.5s;
-o-transition: -webkit-filter 0.5s;
transition: -webkit-filter 0.5s;
}
.menu:hover {
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
-webkit-filter: invert(1); /* Safari */
-moz-filter: invert(1);
-ms-filter: invert(1);
-o-filter: invert(1);
filter: invert(1);
}
}
.selector {
width: 100%;
background-image:url('pic/wline.jpeg');
padding: 0;
}
/* end of menu config */
/* sets the body properties */
body {
background-image:url('http://www.mem3500films.minksfamily.com/pic/lego.jpeg');
background-color: #ffd700;
text-align:center;
font-size: 25px;
}
/* the title attributes */
body{margin:0;padding:0}
#head {
background-image:url('http://www.mem3500films.minksfamily.com/pic/lego1.jpeg');
background-repeat:repeat;
width: 100%;
}
/*the menu line div attributes */
body{margin:0;padding:0}
.line {
background-image:url('http://www.mem3500films.minksfamily.com/pic/line.jpeg');
background-repeat:repeat;
width: 100%;
}
/* makes sure that the website title is not to big */
.M35F {
width: 100%;
max-width: 905px;
margin-top: 20px;
margin-bottom: 20px;
}
/* makes sure links never get underlined */
a {
text-decoration:none;
}
/* gives the footer a background image */
footer {
background-image:url('pic/white.jpeg');
background-repeat:repeat;
text-align: left;
background-color: #FFFFFF;
color: #888888;
font-size: 25px;
}
In my current setup I have it so the images resize with the window then stop getting bigger at a certain size. This works fine now and I want it to be able to do this in the end.
But I have tried SOOOO many things to get this to work and spent hours (literally) but no matter what I've done it doesn't seem to work. Is what I am shooting for not even possible with CSS and HTML?
Remember an important concept. Absolute positioned elements are positioned relatively the first ANCESTOR that has positon different from "static"
Thus, to position your "strings" you need to
wrap the images in a div
make that div "position: relative"
put the text in a div or a span or other container
make the container "position: abolute"
This way you should not have problem with images staing one over another.
.poster p {
position:relative;
top:50%;
transform:translateY(-50%);
}
This will position itself in the vertical center.
add the following to .poster:
text-align:center;
I am using isotope plugin for fluid grid and would like to add some effects for images on hover, in this the grid has 3 different images with different height: jsfiddle code. Is there some way to keep them responsive and fix heigh change on hover zoom? Please suggest, what has been done wrong?
HTML
<div class="item">
<a href="https://twitter.com/">
<img src="http://s9.postimg.org/n0sl7ucqn/image.jpg" alt="">
</a>
</div>
<div class="item">
<a href="https://twitter.com/">
<img src="http://s17.postimg.org/6r28okkq7/image.jpg" alt="">
</a>
</div>
<div class="item">
<a href="https://twitter.com/">
<img src="http://s17.postimg.org/c12m24flb/image.jpg" alt="">
</a>
</div>
CSS
.item {
width: 46.1%;
height: auto;
margin-right: 4%;
margin-bottom: 30px;
float: left;
overflow: hidden;
}
#social_indicator {
font-size: 14px;
font-weight: 300;
font-style: italic;
text-align: right;
margin-top: 0;
margin-bottom: 0;
}
.item img {
width: 100%;
height: 100%;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-o-transition: all 3s ease;
-ms-transition: all 3s ease;
transition: all 3s ease;
}
.item img:hover {
width: 105%;
height: 105%;
margin-right: 1%;
margin-bottom: 1%;
}
}
First, the overflow:hidden; should be on the div, not the image.
I would set the height of the div with jQuery to prevent it from scaling, when the image does:
$('.item > a > img').each(function(index, value){
$(value).parent('a').parent('.item').height( $(value).height() );
});
Remember to add the jQuery-library in your <head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
I want my website to have the same effect this website has: Trask Industries
When the upper right image is hovered the text appears and yellow covers the image.
This is the effect I am failing to recreate in CSS and Html, using headers and hover opacity. In my attempts the headers become opaque rather than standing out like on that site. I also don't know how to make the headers appear and disappear on hover.
Here is the jsfiddle of my attempt.
.content1:hover, .content2:hover, .content3:hover, .content4:hover, .content5:hover, .content6:hover {
color: black;
opacity: 0.30;
transition: .2s;
webkit-transition: .2s;
-webkit-transition: all 500ms ease;
}
You must wrap the h1 and h2 in a div, and you would animate that div in css.
I also added a same class for the contents.
Here is an updated fiddle:
http://jsfiddle.net/bzm6T/2/
Basically, this is the updated code:
Code:
.contents:hover > div {
color: black;
opacity: 1;
}
.contents div {
opacity: 0;
display: block;
width: 100%; height: 100%;
background: rgba(255,255,255,0.3);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
<div class="container">
<a href="articleF.html" class="contents content1">
<div>
<h1>The Low Stakes of Modern life</h1>
<h2>Default 1Default 1Default 1Default 1Default 1Default 1</h2>
</div>
</a>
<a href="articleA1.html" class="contents content2">
<div>
<h1>AARON SWARTZ</h1>
<h2>Cats Can Puuuuur</h2>
</div>
</a>
<a href="articleA2.html" class="contents content3">
<div>
<h1>JOBILLY BOOP</h1>
<h2>Cats Can Puuuuur</h2>
</div>
</a>
<a href="articleD.html" class="contents content4">
<div>
<h1>Content4</h1>
<h2>Cats Can Puuuuur</h2>
</div>
</a>
<a href="articleK1.html" class="contents content5">
<div>
<h1>Content5</h1>
<h2>Cats Can Puuuuur</h2>
</div>
</a>
<a href="articleK1.html" class="contents Content6">
<div>
<h1>Content6</h1>
<h2>Cats Can Puuuuur</h2>
</div>
</a>
</div>
A slightly different approach, but basically the same with CSS transition: FIDDLE
.holder {
width: auto;
margin: 10px auto;
border: 1px solid black;
overflow: hidden;
}
.leftdiv {
float: left;
background-color: blue;
height: 100%;
color: white;
}
.picdiv {
float: right;
background-color: orange;
}
.picdiv img {
opacity: 1;
transition: opacity 1s ease-in-out;
}
.picdiv img:hover {
opacity: 0;
}
I just cant seem to fix this issue where on hover, the DIV expands and then shrinks giving a "jumpy" or "jitter" look. This only seems to happen in IE 11 and I cant pinpoint why.
I have a list which will be for images and I want the hover state to be a block that is 10px less than its parent;
Here is my fiddle:
Here is my code;
HTML
<div id="container">
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
</div>
CSS - the inner class is the one with the hover
#container {
padding: 5px;
margin: 0 auto;
border: 2px solid black;
}
.item {
display:block !important;
list-style:none;
float: left;
background: #CCC;
margin: 5px;
width: 50px;
height: 50px;
}
.item.w2 { width: 300px; }
.item.h2 { height: 200px; }
.inner {
background:#fff;
background: rgba(255, 255, 255, 1);
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
margin:0;
padding:0;
text-align: center;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
}
.inner:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
filter: alpha(opacity=95);
opacity: .95;
z-index:1;
}
/* no transition on .isotope container */
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: .6s;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
opacity:.5;
}
Consequently the "jumpy" or "jitter" disappears when there is no -transition such as ease-in-out or opacity.
I appreciate anyone who has a look! any suggestions would be great this is a huge learning curve for me :)
I created a simplified example of this problem:
http://jsfiddle.net/DqUvL/14/
I also reported the problem to MSFT:
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/107987/
HTML:
<a class="bad" href="#">
<img src="http://placekitten.com/200/200" width="200" height="200" alt="cat">
<div class="detail">
<h2>Heading</h2>
<div class="margin">
Margin
</div>
<div class="clear"></div>
</div>
</a><a class="bad" href="#">
<div class="detail">
<h2>Heading</h2>
<div class="clear"></div>
</div>
</a>
CSS:
.bad {
display: block;
outline: 1px solid blue;
}
.clear {
clear: both;
}
.bad:hover {
outline-color: red;
}
img {
float:left;
}
h2 {
margin: 0;
}
.margin {
margin: 1em 0;
}
I worked around the problem by adding a container style="overflow:hidden" around the hover elements:
http://jsfiddle.net/DqUvL/16/
This solves the simplified problem.
Thanks #mohitp:
https://stackoverflow.com/a/12665222/973470
I tested with IE 10. Seems that your divs are too big, because they have position: absolute.
Therefore they are aligned to the container. Add this to your item class:
.item {
position: relative;
}
Absolute elements are aligned to the next parent that is not static. It might be that IE's default stylesheet differs from the other browsers when it comes to list elements position. Did not checked this yet.