asked on

Rollover over photo image banner

How to rollover over photo image banner in my header with HTML and CSS only ?

Thx

Hi Simon,

You can use :hover pseudo-class

<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.imgHover
{
	background: url("img1") no-repeat;
}
.imgHover:hover {
	background: url("img2") no-repeat;
	}
</style>
</head>
<body>
<div class="imgHover">
</div>
</body>
</html>

Open in new window

Regards,
Chinmay.

Simon Leung

ASKER

I don't want hover over to change the image. The header banner will be changed automatically to pic1, pic2, ... and rotate back to beginning indefinitely

Chinmay Patel

Rollover specifically means using mouse or similar pointing device to change the image when a pointer is moved on top of the image. What you are looking for is called a "slider".

Here is a working codepen for the same: https://codepen.io/dudleystorey/pen/ehKpi

Please notice the @keyframe rule which is running the entire show. You can understand more about it at: https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

Simon Leung

ASKER

Thx but can't get exactly about how it works...

div#slider figure img { width: 20%; float: left; } ==> there are 5 pics so 20 % *5 mean it will occur a whole screen, correct ?

However, why the width of the following CSS be 500% ? How how it can slider in this case ?

Thx again.

div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}

Chinmay Patel

Check the entire code HTML + CSS, now in HTML there are 5 images. Author of the original code intended to cover the entire page with the image i.e. a container that is showing this image should be of 100% width correct? but what if you are creating a container for 5 such images (equal width), then the entire stripe will be of width 100*5 = 500%.

And then check the animation: 30s slidy infinite. The keyframes of Slidy are moving the stripe which contains all images -100% at a time hence giving you the sliding effect.

Simon Leung

ASKER

Do you mean the "width:500%" is to cover all 5 images ?

Does the keyframes slidy is used to control which image available to see on the page ?

Then why inside "slider figure img", the width is set to 20% ?

Thx again.

ASKER CERTIFIED SOLUTION

Chinmay Patel

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial