JSFiddle Here: https://jsfiddle.net/br84z1Lj/
On hover, both images swap, instead of just one. If I end the div for "swapMe" and restart it for the next image, it puts the next image on the next line, instead of staying in line. I'm completely stuck on getting only one image to change on hover instead of both!
CSS
#charset "utf-8";
/* CSS Document */
#thumbs {
width: 460px;
margin-top: 90px;
margin-left: auto;
margin-right: auto;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
.swapMe img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.swap1,
.swapMe:hover .swap2 {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.swapMe:hover .swap1,
.swap2 {
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}
HTML
<body>
<div id="thumbs">
<div class="swapMe">
<a id="single_image1" href="#"><img src="http://dummyimage.com/200/000000/fff" class="swap1" style="position: absolute" height="150" width="188" alt="" />
<img src="http://dummyimage.com/200/d100d1/fff" height="150" width="188" class="swap2">
</a>
<a id="single_image2" href="#"><img src="http://dummyimage.com/200/000000/fff" class="swap1" style="position: absolute" height="150" width="188" alt="" />
<img src="http://dummyimage.com/200/d100d1/fff" height="150" width="188" class="swap2">
</a>
<span class="stretch"></span>
</div>
</div>
</body>
</html>
Revising your bottom hover statement to this should do the trick, if I'm understanding what you're looking for! Side note, prefixed opacity declarations aren't really necessary at this point, every modern browser within any version I can think of supports plain old opacity.
.swap1:hover,
.swap2:hover {
opacity: 0;
}
https://jsfiddle.net/will0220/awpv02p7/
Please do try this css code:
.swap1,
.swapMe a:hover .swap2 {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.swapMe a:hover .swap1,
.swap2 {
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}
you need to wrap the 2 images in separate div's. You can use display: inline-block
I updated your fiddle. https://jsfiddle.net/br84z1Lj/1/
CSS
#charset "utf-8";
/* CSS Document */
#thumbs {
width: 460px;
margin-top: 90px;
margin-left: auto;
margin-right: auto;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
.swapMe {
display: inline-block;
}
.swapMe img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.swap1,
.swapMe:hover .swap2 {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.swapMe:hover .swap1,
.swap2 {
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}
HTML
<body>
<div id="thumbs">
<div class="swapMe">
<a id="single_image1" href="#"><img src="http://dummyimage.com/200/000000/fff" class="swap1" style="position: absolute" height="150" width="188" alt="" />
<img src="http://dummyimage.com/200/d100d1/fff" height="150" width="188" class="swap2">
</a>
</div>
<div class="swapMe">
<a id="single_image2" href="#"><img src="http://dummyimage.com/200/000000/fff" class="swap1" style="position: absolute" height="150" width="188" alt="" />
<img src="http://dummyimage.com/200/d100d1/fff" height="150" width="188" class="swap2">
</a>
</div>
<span class="stretch"></span>
</div>
</body>
</html>
Related
I have created a flip board animation with CSS transitions, and it works fine in Chrome/Firefox/Edge, but in Safari it flickers a lot during the transition, but the final state is correct.
I thought it might be a problem with the z-index in the transitions, but when removing those the flickering is still there.
I have autoprefixer on so I don't think it's an issue with backface-visibility.
If you look at this codepen in both Chrome and Safari, you can see the how it's supposed to be in Chrome, and the flickering issue in Safari.
https://codepen.io/joel-udd/pen/QWpEQMM
<div class="board board-1">
<div class="row-1">
<div class="letter-wrapper">
<div class="behind-letter">
<div class="behind bottom"><span>F</span></div>
<div class="behind top">I</div>
</div>
<div class="letter">
<div class="flip front">H</div>
<div class="flip back"><span>I</span></div>
</div>
<div class="letter">
<div class="flip front">G</div>
<div class="flip back"><span>H</span></div>
</div>
<div class="letter">
<div class="flip front">F</div>
<div class="flip back"><span>G</span></div>
</div>
</div>
</div>
</div>
.board {
display: inline-block;
position: relative;
perspective: 1000px;
.letter-wrapper {
display: inline-block;
position: relative;
width: 11vw;
margin-left: 2px;
height: 14vw;
.flip, .behind {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
font-size: 14vw;
span {
display: inline-block;
transform: translateY(-50%);
}
}
.letter {
display: inline-block;
position: absolute;
top: 2px;
width: 100%;
height: 7vw;
transform: rotateX(0);
transform-style: preserve-3d;
transform-origin: bottom center;
.flip {
height: 100%;
backface-visibility: hidden;
&.back {
transform: rotateX(180deg);
}
}
&:nth-child(2) {
z-index: 10;
}
&:nth-child(3) {
z-index: 20;
}
&:nth-child(4) {
z-index: 30;
}
}
.behind-letter {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
z-index: 5;
.behind {
height: 50%;
&.bottom {
top: calc(50% + 2px);
}
}
}
}
&.active {
.row-1 {
.letter-wrapper {
.letter {
transform: rotateX(-180deg);
&:nth-child(2) {
z-index: 50;
transition: transform .5s .5s, z-index 0s .6s;
}
&:nth-child(3) {
z-index: 40;
transition: transform .5s .3s, z-index 0s .4s;
}
&:nth-child(4) {
transition: transform .5s .1s;
}
}
}
}
}
}
Thanks!
I need to stop animation on hover for the following Codepen project.
I though that adding
.photo:hover{
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
could be enough, but it works only for visible image while for other three animation continues in background.
how can I solve?
Thanks for reading
You should use the :hover pseudo class on .container instead, then pause the animation on all of .photo
body {
background: #000;
}
.container {
margin: 50px auto;
width: 500px;
height: 300px;
overflow: hidden;
border: 10px solid;
border-top-color: #856036;
border-left-color: #5d4426;
border-bottom-color: #856036;
border-right-color: #5d4426;
position: relative;
}
.photo {
position: absolute;
animation: round 16s infinite;
opacity: 0;
}
#keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
img:nth-child(1) {
animation-delay: 12s;
}
img:nth-child(2) {
animation-delay: 8s;
}
img:nth-child(3) {
animation-delay: 4s;
}
img:nth-child(4) {
animation-delay: 0s;
}
.container:hover .photo {
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
<div class="container">
<img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
</div>
I am new to coding, and I am making a home page. I was trying to get the black and white hover feature on the images of my home pages. However, when I hover my mouse over the image, it does not work. It is only until you hover to the left of the image that the image will turn from color to BW. Any ideas on how to fix this? Any help is greatly appreciated!
Here is my code:
#font-face {
font-family: "p22-underground";
src: qzo1okq;
}
.container {
position: absolute;
padding-bottom: 0px;
margin-top: -125px;
margin-right: -70px;
float: left;
}
.Marlon {
position: absolute;
margin-top: -275px;
margin-left: 15px;
}
/*B&W*/
.blue {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blue:hover {
-webkit-filter: grayscale(100%);
}
.blue {
position: relative;
background-position: left top;
margin-top: 120px;
margin-left: -250px;
max-width:100%;
height:auto;
text-align: center;
}
/*B&W*/
.Tammy {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.Tammy:hover {
-webkit-filter: grayscale(100%);
display: block;
}
.Tammy {
position: relative;
background-position: left top;
margin-top: -5px;
margin-left: -250px;
max-width:100%;
height:auto;
text-align: center;
}
/*B&W*/
.Tacos {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.Tacos:hover {
-webkit-filter: grayscale(100%);
}
.Tacos {
position: relative;
background-position: center;
margin-top: -623px;
margin-left: 100px;
max-width:100%;
text-align: center;
}
/*B&W*/
.Glasses {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.Glasses:hover {
-webkit-filter: grayscale(100%);
}
.Glasses {
position: relative;
background-position: center;
margin-top: -5px;
margin-left: 100px;
max-width:100%;
height:auto;
text-align: center;
}
/*B&W*/
.Door {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.Door:hover {
-webkit-filter: grayscale(100%);
}
.Door{
position: relative;
background-position: right top;
margin-top: -623px;
Margin-left:700px;
max-width:100%;
height:auto;
text-align: center;
}
.Social {
position: relative;
text-align: center;
inline: block;
padding-bottom: 0px;
top:-25px;
bottom: 0px;
margin:auto;
}
body {
background-image: url("http://ac.aup.edu/~a94241/background.jpeg");
}
ul {
list-style-type: none;
height: 50px;
margin: 150;
padding: 80;
overflow: hidden;
margin-top: 200px;
background-color: black;
font-family: "p22-underground";
font-weight: "500";
font-size: 150%;
}
li {
float: none;
color: "#fcf8de";
position: relative;
display: inline-block;
bottom: 12px;
margin-left: 10px;
margin-right: 10px;
}
li a {
display: block;
color: "#fcf8de";
text-align: center;
padding: 14px 16px;
margin-left: 5px;
}
footer {
height:10px;
padding: 20px;
margin-top:100px;
text-align:left;
vertical-align:middle;
padding-top: 14px;
background-color: black;
font-family: "p22-underground";
font-weight: "300";
position:static;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://use.typekit.net/qzo1okq.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
<body>
<div class="container">
<a href="http://ac.aup.edu/~a94241/Marlon Coding.html">
<img src="http://ac.aup.edu/~a94241/cactus.png" alt="Cactus Vector" width="100" height="90">
</a>
</div>
<div class="Marlon">
<a href="http://ac.aup.edu/~a94241/Marlon Coding.html">
<img src="http://ac.aup.edu/~a94241/Marlon Vector.png" alt="Marlon Vector" width="450" height="550">
</a>
</div>
<ul>
<center>
<h1 style="font-p22-underground-sc, sans-serif;font-style:normal; font-weight:500; font-size:80% "</h1>
<li>PHILOSOPHIE</li>
<li>MENU</li>
<li>NOUS TROUVER</li>
<li>AVIS</li>
<li>CONTACT
</li>
</ul>
</center>
<div class="opacity">
<div class="blue">
<a href="http://ac.aup.edu/~a94241/Philosophie.html">
<img src="http://ac.aup.edu/~a94241/blue car.png" alt="BlueCar" width="300" height="310">
</a>
</div>
<div class="Tammy">
<a href="http://ac.aup.edu/~a94241/Avis.html">
<img src="http://ac.aup.edu/~a94241/tammy Lunch.png" alt="TammyLunch" width="300" height="310">
</a>
</div>
<div class="Tacos">
<a href="http://ac.aup.edu/~a94241/Contact.html">
<img src="http://ac.aup.edu/~a94241/tacos.png" alt="Tacos" width="300" height="310">
</a>
</div>
<div class="Glasses">
<a href="http://ac.aup.edu/~a94241/Menu.html">
<img src="http://ac.aup.edu/~a94241/Glasses.png" alt="Glasses" width="300" height="310">
</a>
</div>
<div class="Door">
<a href="http://ac.aup.edu/~a94241/Nous Trouver.html">
<img src="http://ac.aup.edu/~a94241/door.png" alt="Door" width="300" height="620">
</a>
</div>
</div>
<footer>
<p1><font color="#fcf8de">CALL: 01 40 60 12 12</font></p1>
<div class="Social">
<a href="https://www.facebook.com/restaurantmarlon">
<img src="http://ac.aup.edu/~a94241/facebook.png" alt="Facebook Vector" width="20" height="25">
</a>
<a href="https://www.instagram.com/restaurantmarlon/">
<img src="http://ac.aup.edu/~a94241/instragram.png" alt="Instargram Vector" width="20" height="25">
</a>
</div>
</footer>
</body>
</html>
So this issue has been bugging me for quite a while. I have this div container that centers an overflow image to the center.
However in Safari, the icon inside the div is not positioned in the center. Instead it is at the top. It works fine in other browsers though. Only Safari has this bug.
I attached a fiddle below. Appreciate any help! :)
JSfiddle demo
var $container = $('#page');
$container.masonry({
columnWidth: '.grid-sizer',
itemSelector: '.item',
percentPosition: true,
gutter: 10
});
#page .item {
width: calc(16.66% - 10px);
display: inline-block;
height: 0;
float: left;
padding-bottom: 16.66%;
overflow: hidden;
background-color: salmon;
margin: 5px;
position: relative;
}
#page .item.s1 {
width: calc(50% - 10px);
padding-bottom: 50%;
overflow: hidden;
background-color: navy;
}
.item > a {
/* position: relative; */
display: block;
overflow: hidden;
color: white;
}
.item:hover .grid-image:after {
background: rgba(0, 0, 0, .7);
}
.item:hover .grid-image > img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.item:hover .item-caption {
opacity: 1;
z-index: 3;
visibility: visible;
}
.item-caption,
.grid-image > img,
.grid-image:after {
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.item-caption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
text-align: center;
opacity: 0;
display: table;
height: 100%;
width: 100%;
}
.item-caption > div {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.grid-image {
position: relative;
overflow: hidden;
}
.grid-image img {
display: block;
overflow: hidden;
}
.grid-image:after {
position: absolute;
display: block;
content: "";
height: 100%;
width: 100%;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container-fluid">
<div id="page">
<!-- GRID ITEM -->
<div class="item s1">
<a href="#">
<div class="grid-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Pleiades_large.jpg/1024px-Pleiades_large.jpg">
</div>
<div class="item-caption">
<div>
<h5>I want this to be center</h5>
</div>
</div>
</a>
</div>
<!-- /GRID ITEM -->
</div>
</div>
</body>
</html>
see this codepen for a demo
EDIT of course, hard coding a width for an element is no solution. It should be just the size of the actual title.
HTML
<br/>
<nav class="navigation">
<div class="navfake"></div>
<div class="singleelement">
<div class="container">
<div class="title">Test title 2</div>
<div class="titlepicture">some picture</div>
</div>
</div>
<div class="singleelement">
<div class="container">
<div class="title">Test title newsfeed super long 1</div>
<div class="titlepicture">some picture</div>
</div>
</div>
</nav>
css
/** the newsfeed and footer */
nav {
width: 100%;
height: 20px;
position: relative;
}
.navfake {
width: 100%;
height: 100%;
background: green;
z-index: 10;
position: relative;
}
.singleelement {
display: inline-block;
height: 60px;
text-align: center;
}
.container {
position: absolute;
top: 0px;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
height: 200px;
}
.titlepicture {
position: absolute;
width: 100%;
background-color: red;
z-index: 10;
height: 100px;
overflow: hidden;
}
.container:hover {
top: -80px;
}
.container:hover .titlepicture {
height: 100px;
z-index: 10;
}
.title {
z-index: 555;
position: relative;
height: 20px;
width: 100%;
}
.footer {
position: relative;
z-index: 1000;
background-color: white;
}
The trick was to replace position absolute with position relative
HTML
<nav class="navigation">
<div class="navfake"></div>
<div class="singleelement">
<div class="container">
<div class="title">Test title 2</div>
<div class="titlepicture">some picture</div>
</div>
</div>
<div class="singleelement">
<div class="container">
<div class="title">Test title newsfeed super long 1</div>
<div class="titlepicture">some picture</div>
</div>
</div>
</nav>
<div class="footer">some text blablablablablablabla
<br/>some text blablablablablablabla
<br/>some text
<br/>some text
<br/>some text
<br/>some text
<br/>some text
<br/>xxx
</div>
CSS
/** the newsfeed and footer */
nav {
width: 100%;
height: 20px;
}
.navfake {
width: 100%;
height: 100%;
background: green;
z-index: 10;
position: relative;
}
.singleelement {
display: inline-block;
height: 60px;
text-align: center;
position: relative;
}
.container {
top: -20px;
position: relative; /**changed*/
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
height: 200px;
}
.titlepicture {
position: absolute;
background-color: red;
z-index: 10;
height: 100px;
overflow: hidden;
}
.container:hover {
top: -80px;
}
.container:hover .titlepicture {
height: 100px;
z-index: 10;
}
.title {
z-index: 555;
position: relative;
height: 20px;
width: 100%;
}
.footer {
position: relative;
z-index: 1000;
background-color: white;
}
On .singleelement add some sort of width to it. For example 64px and it will work.
Fiddle: http://jsfiddle.net/7WZk5/
Perhaps this is what you're looking for: http://codepen.io/aytimothy/pen/mlkAh
Have you tried adding the "width:" CSS into your "container" Class?
.container {
position: absolute;
top: 0px;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
height: 200px;
width: 50%;
}
Well, 50% since you have two elements. If you want to have different widths for each of them, you could always put the width as a STYLE attribute for each element.