I would like to have the images in my slideshow to be clickable links, but just putting tags around it doesn't work:
<img class='photo' src="Images/Red.jpeg" alt="">
It probably has something to do with the animation, is there a way around this?
Css:
#slideshow {
margin:50px auto;
width:60em;
height:18em;
overflow:hidden;
border:0.4em solid;
border-color: black;
position:relative;
}
.photo{
position:absolute;
animation:round 16s infinite;
-webkit-animation: round 16s infinite;
opacity:0;
}
#keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
#-webkit-keyframes round {
25%{opacity:1;}
40%{opacity:0;}
}
img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}
img:nth-child(4){-webkit-animation-delay:0s;}
img:nth-child(3){-webkit-animation-delay:4s;}
img:nth-child(2){-webkit-animation-delay:8s;}
img:nth-child(1){-webkit-animation-delay:12s;}
HTML:
<div id="slideshow">
<img class='photo' src="Images/Red.jpeg" alt="">
<img class='photo' src="Images/rose.jpeg" alt="">
<img class='photo' src="Images/White.jpeg" alt="">
<img class='photo' src="Images/rose.jpeg" alt="">
</div>
Wrap images with a and add class photo to a links. Remove class photo from images. Try that :)
Try:
Wrap all images in <a> tags, each one with a "photolink" class or any name you want.
#slideshow a.photolink { display: block; }
Try changing "position: absolute" in .photo to "position: relative".
Related
I want to stagger the fade-in animations of images in a gallery. I've boiled down my problem to the attached snippet.
Not sure whether the snippets here allow for SCSS but in any case, I think my mistake is in the CSS selector where I set the animation-delay.
#keyframes FadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.masonry {
display: flex;
}
.item {
animation: FadeIn 0.5s linear;
}
#for $i from 1 through 20 {
.item > .cld-image > img:nth-child(#{$i}) {
animation-delay: 1000ms * $i;
}
}
<div class="masonry">
<div class="item">
<div class="cld-image">
<img src="https://picsum.photos/200" />
</div>
</div>
<div class="item">
<div class="cld-image">
<img src="https://picsum.photos/200" />
</div>
</div>
<div class="item">
<div class="cld-image">
<img src="https://picsum.photos/200" />
</div>
</div>
</div>
I think my mistake is in the CSS selector where I set the animation-delay.
Your thoughts are correct! The selector where you add the animation-delay is incorrect, since there's no animation added to the actual <img> tags(logically).
To fix this, you have to either add the animation-delay to the .item class, or add the animation itself to the <img> tags.
Right now my code makes the logos animate from right to left and once it hits the end, it restarts. How can I make it continue in a loop so that the first logo follows the last one when a new cycle starts?
EDIT:
I rather not use extra js libraries, so if there is a simple way of doing this with jquery that would be much better
img {
width: 100px;
}
.marquee {
position: relative;
width: 100%;
height: 100px;
border: 1px solid black;
overflow: hidden;
}
.marquee div {
display: block;
position: absolute;
width: 300%;
overflow: hidden;
animation: marquee 20s linear infinite;
}
.marquee div:hover {
animation-play-state: paused;
}
.marquee span {
float: left;
width: 50%;
}
#keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
<div class="marquee">
<div>
<img src="http://static.bragdeal.com/logo.png" alt="">
<img src="http://static.bragdeal.com/logo.png" alt="">
<img src="http://static.bragdeal.com/logo.png" alt="">
<img src="http://static.bragdeal.com/logo.png" alt="">
<img src="http://static.bragdeal.com/logo.png" alt="">
<img src="http://static.bragdeal.com/logo.png" alt="">
<img src="http://static.bragdeal.com/logo.png" alt="">
<img src="http://static.bragdeal.com/logo.png" alt="">
</div>
</div>
I updated your fiddle https://jsfiddle.net/gkpnx34v/2/ --- took a little tinkering, but that should give you the idea.
.tech-slideshow {
height: 100px;
max-width: 100%;
margin: 0 auto;
position: relative;
overflow: hidden;
border:1px solid black;
font-size:0; /* THIS IS A HACK TO REMOVE THE "WHITESPACE" BETWEEN IMAGES.
YOU COULD ALSO PUT ALL OF THE IMAGES ON THE SAME LINE
(eg: <img src=""><img src=""><img src="">
with no spaces or line-breaks),
BUT THAT MAKES THE CODE LESS READABLE SO I'M DOING THIS
FOR THE SAKE OF CREATING THIS EXAMPLE FOR YOU */
}
.mover-1 {
height: 150px;
width: max-content;
position: absolute;
overflow-x:hidden;
top: 0;
left: 0;
animation: moveSlideshow 5s linear infinite;
}
.mover-1 img {
display:inline-block;
vertical-align:middle;
width:100px;
margin:0;
}
#keyframes moveSlideshow {
100% {
transform: translateX(-500px);
}
}
<div class="tech-slideshow">
<div class="mover-1">
<img src="https://placekitten.com/100/150">
<img src="https://placekitten.com/100/100">
<img src="https://placekitten.com/100/100">
<img src="https://placekitten.com/100/100">
<img src="https://placekitten.com/100/100">
<img src="https://placekitten.com/100/150">
<img src="https://placekitten.com/100/100">
<img src="https://placekitten.com/100/100">
<img src="https://placekitten.com/100/100">
<img src="https://placekitten.com/100/100">
<img src="https://placekitten.com/100/150">
<img src="https://placekitten.com/100/100">
<img src="https://placekitten.com/100/100">
<img src="https://placekitten.com/100/100">
<img src="https://placekitten.com/100/100">
</div>
</div>
Set your .mover-1 container's width to max-content (to auto-size to whatever width is necessary). You could also set it to an arbitrary (huge) width just so you won't have to worry about having logos roll over to the next line.
Then set some styles on your images so they'll line up nicely.
Finally, set the moveSlideshow translateX distance to THE EXACT WIDTH OF ONE SET OF LOGOS.
The point is, you want to have 2 sets of logos -- the initial set and then a duplicate that you roll into view. Set your animation to move exactly the width of 1 set and it should loop smoothly.
Just for posterity (and because it's REALLY easy to copy and paste code and doesn't take any extra bandwidth to render) I actually added a 3rd set of logos just to make sure my block of logos was wide enough to never have a gap on wide screens.
P.S. The difference in heights I set on the kitten images (some of them being 150px tall instead of 100px) has nothing to do with the functionality; I just wanted to make sure that you can tell when the animation loops.
P.P.S. Rather than a) manually calculating the total width of the logos or b) adding redundant blocks of logos, you could easily use jQuery to find the width of that .mover-1 container ($('.mover-1')[0].width()) and set your keyframe to move that distance. Then make an array of the images ($('.mover-1 img')), then append/prepend them to the original set.
This code (untested) should get you close:
var logos = $('mover-1 img');
$('.mover-1').append(logos).append(logos);
HTML:
<div class='marquee'>
....
images
....
</div>
CSS:
.marquee {
width: 100%;
overflow: hidden;
border:1px solid #ccc;
}
JavaScript:
$(function () {
$('.marquee').marquee({
duration: 5000,
duplicated: true,
gap: 00,
direction: 'left',
pauseOnHover: true
});
});
This is what i have done to make it run using JQuery Marquee.
External links:
jquery.pause.js
jquery.marquee.min.js
Also you can follow this Fiddle
I know the question says CSS only, but I find all attempts using only keyframes and HTML leads to unwanted spacing between the logo, overlapping logos, parallax effects, etc.
For those willing to use some JavaScript the following works for me:
HTML:
<div id="hold_logos"></div>
CSS:
body {
background: black;
}
#hold_logos {
height: 200px;
background: #218c74;
display: flex;
align-items: center;
margin-top: 100px;
}
.logo {
position: absolute;
cursor: pointer;
width: 140px;
border-radius: 4px;
animation: marquee 10s linear infinite;
}
#keyframes marquee {
0% {
transform: translateX(1400px);
}
100% {
transform: translateX(-200px);
}
}
JS:
images = ["https://www.strunkmedia.com/wp-content/uploads/2018/05/bigstock-221516158.jpg", "https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2273/posts/32751/image/TwoPeaks-Logo.jpg", "https://png.pngtree.com/png-clipart/20210711/original/pngtree-colorful-nature-logo-png-image_6511888.jpg", "https://designshack.net/wp-content/uploads/symbol-logo-example.jpg", "https://cdn.thebrandingjournal.com/wp-content/uploads/2019/05/chanel_logo_the_branding_journal.jpg"];
const number_of_logos = 5;
const spacing = (window.innerWidth / number_of_logos)*10;
const duration = (number_of_logos*spacing);
var int_cnt = -1;
var marquee = document.getElementById("hold_logos");
partner_interval = setInterval(function() {
int_cnt++;
if(int_cnt < number_of_logos) {
const img = document.createElement("img");
img.className = "logo";
img.src = images[int_cnt];
marquee.append(img);
}
}, spacing/1.4);
setTimeout(function() {
clearInterval(partner_interval);
}, duration);
Result:
The result is smoother than what the GIF shows since it's still using keyframes.
Here's the CodePen.
any idea why this slideshow does work in Firefox, but not in Chrome?(Haven't tested in IE) Hope someone can help!
CSS:
#slideshow {
margin:50px auto;
width:60em;
height:18em;
overflow:hidden;
border:0.4em solid;
border-color: black;
position:relative;
}
.photo{
position:absolute;
animation:round 16s infinite;
opacity:0;
}
#keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}
HTML:
<div id="slideshow">
<img class='photo' src="Images/Red.jpeg" alt="">
<img class='photo' src="Images/rose.jpeg" alt="">
<img class='photo' src="Images/White.jpeg" alt="">
<img class='photo' src="Images/rose.jpeg" alt="">
</div>
Chrome is lagging behind a bit with this particular one - not sure why, really.
As shown on caniuse, Chrome requires the -webkit- prefix on all animation-related properties, as well as #-webkit-keyframes.
Add these, and it should all work fine. It's kind of annoying to have to duplicate everything just for Chrome, but oh well...
#slideshow {
margin:50px auto;
width:60em;
height:18em;
overflow:hidden;
border:0.4em solid;
border-color: black;
position:relative;
}
.photo{
position:absolute;
animation:round 16s infinite;
-webkit-animation:round 16s infinite;
opacity:0;
}
#keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
#-webkit-keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}
Chrome uses different syntex:
#-webkit-keyframes
-webkit-animation
-webkit-animation-delay
I tried to make one button fade in then the other follow up. Is there any way that i can achieve wat i trying to do?
if there is way or any article, please help me know how to make one by one button animate at a time when window load?
HTML
<li class="li">
<a href="">
<img class="image" src="http://templateafiq1.site88.net/button/about%20me.png">
</a></li>
<li class="li">
<a href="">
<img class="image" src="http://templateafiq1.site88.net/button/about%20me.png">
</a></li>
</center>
</ul>
</font>
CSS
div header{
width:100%;
height:50px;
top:50px;
position:fixed;}
header .image{
height:110px;
width:110px;
opacity:0;
-moz-animation: fadein 2s;
-webkit-animation: fadein 2s;
-webkit-animation-delay: 2s;
-o-animation: fadein 2s;
animation-timing-function:linear;
animation-fill-mode:forwards;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:1s;
-webkit-animation-fill-mode: forwards;}
#header .ul{
list-style-type: none;
position:fixed;
top:17px;
width:100%;}
header .li {
height:110px;
width:110px;
padding:1px;
display:inline;
z-index:1;}
#header .li a{
text-decoration:none;
height:110px;
width:110px;}
//Fade in effect
#keyframes fadein {
0% {opacity:0;}
100% {opacity:1;}}
#-moz-keyframes fadein {
0% {opacity:0;}
100% {opacity:1;}}
#-webkit-keyframes fadein {
0% {opacity:0;}
100% {opacity:1;}}
#-o-keyframes fadein {
0% {opacity:0;}
100% {opacity:1;}}
Javascript
$(window).load(function() {
$("#header.image").fadeIn("fast");});
here the demo : http://jsfiddle.net/pkjfgfpf/
Sorry for the bad english, english is not my native language.
Thank you so much for your help.
The second argument to the fadeIn function is a function to call once the animation is complete. You can use this to chain animations to only happen after a previous animation is complete. See the fadeIn documentation for details.
HTML:
<img class="image" id="img1" src="imageUrl.filetype" />
<img class="image" id="img2" src="imageUrl.filetype" />
<img class="image" id="img3" src="imageUrl.filetype" />
JQuery:
$("#img1").fadeIn("slow", function() {
$("#img2").fadeIn("slow", function() {
$("#img3").fadeIn("slow");
});
});
CSS:
.image {
display: none;
}
Example JSFiddle (with all non-relevant parts removed)
Probably this could be your solution, Adjust it in your code (see the example here http://jsfiddle.net/nepal12/8jjooaox/)
// HTML
<div id="images">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<img src="img4.jpg" alt="">
</div>
// Css
div#images { font-size: 0; background: #000; }
div#images img { width: 50%; height: auto;
opacity: 0; transition: .8s opacity; }
div#images img.visible { opacity: 1; }
// Javascript
<script>
var images = document.querySelectorAll("#images img"), i = 1;
Array.prototype.forEach.call(images, function(images) {
setTimeout(function(){ images.classList.add("visible") }, 700*i)
i++;
})
</script>
Change this:
$('#header.image').fadeIn('fast');
To:
$('.image').each(function(index,domEle){
setTimeout(function ( ) {
if(domEle.style.webkitAnimationPlayState!=undefined && domEle.style.webkitAnimationPlayState != null)
{
domEle.style.webkitAnimationPlayState = 'running'
}
if(domEle.style.mozAnimationPlayState!=undefined && domEle.style.mozAnimationPlayState != null)
{
domEle.style.mozAnimationPlayState = 'running'
}
if(domEle.style.oAnimationPlayState!=undefined && domEle.style.oAnimationPlayState != null)
{
domEle.style.oAnimationPlayState = 'running'
}
if(domEle.style.msAnimationPlayState!=undefined && domEle.style.msAnimationPlayState != null)
{
domEle.style.msAnimationPlayState = 'running'
}
if(domEle.style.animationPlayState!=undefined && domEle.style.animationPlayState != null)
{
domEle.style.animationPlayState = 'running'
}
},index*2000);
});
At your CSS styles simply add the following:
header .image{
animation-play-state:paused;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
}
sample Fiddle http://jsfiddle.net/pkjfgfpf/
I am having a bit of a problem, I have to add caption to my image which has a transparent background of opacity say 0.65 and color black, I have added a caption which has no background effects yet, help needed ASAP.
Thank You in advance.
Here's my code
<div class="img-wrap"> <div style="300 px; font-size:20px; text-align:center;background-color= "ff0066;">
<img src="/gadgets.jpg" alt="alternate text" width="220px" height="200px" style="padding-bottom:1.0em;">
Gadgets and Accessories
</div>
<div class="img-info">
<h3>Gadgets & Accessories</h3>
Tablets<br>
Headphones<br>
External Optical Drives<br>
Flexible Keyboards<br>
<h3>More...</h3>
</div>
</div>
The classes img-wrap and img-info contain styling code for some transitions for mouse hover effect, do I need to create a separate class for the caption thing?
I think you're looking for something like this:
FIDDLE
Markup
<div class="img-wrap">
<img src="http://placehold.it/220x200" alt="alternate text" width="220px" height="200px" />
<a class="caption" href="#">Gadgets and Accessories</a>
</div>
CSS
.img-wrap
{
position:relative;
height: 200px;
overflow:hidden;
}
.caption
{
width:220px;
font-size:20px;
text-align:center;
background-color: rgba(0,0,0,.7);
position:absolute;
left:0;
bottom:-25px;
color:#fff;
visibility:hidden;
transition: all, 0.3s ease 0.2s;
}
img
{
width: 220px;
height: 200px;
display:inline-block;
}
img:hover + .caption
{
visibility:visible;
bottom: 2px;
transition: all, 0.3s ease 0.2s;
}