4
I need to create an HTML/CSS banner that uses only two JPG/GIF images. The first image will be 300x250px and the second image 600x250px. The first image will be displayed and the mouse will be expanded and the second image will be shown.
When displaying the second image, it needs to have an external link.
1
You can do this through Fade in Overlay, with CSS and HTML. Run the code below and see how it works.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #FFFFFF;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}<h2>Fade in Overlay</h2>
<p>Passe o mouse sobre a imagem para ver o efeito.</p>
<div class="container">
<img src="http://lorempixel.com/output/nightlife-q-g-300-250-1.jpg" alt="Avatar" class="image" />
<div class="overlay">
<a href="#linkparaoutrapagina"><img src="http://lorempixel.com/output/city-q-g-600-250-10.jpg" alt="Avatar" /></a>
</div>
</div>The images used have the dimensions you mentioned and in the second image just insert the link in the property href.
Browser other questions tagged javascript html5 css3
You are not signed in. Login or sign up in order to post.
Hi Pedro, thank you for the answer. It helped a lot, but the images are very large. Wouldn’t you have a better definition to not be only in percentage? Because I need to follow a pattern, where the first image should be 300x250px and the expanded image should be 600x250px.
– mab
Hello Maíra, the images used have exactly these dimensions that you are talking 300x250 and 600x250 consecutively. But answering your question, yes you can fix a size for standardization, just create a CSS class applying the width and height properties to the desired sizes.
– Pedro Souza
Pedro, with the example sent, the image of 300x250 is very burst, far beyond the original size. That’s why I asked. I will try again with this suggestion. Thank you.
– mab
Hello Pedro, to work this, the total space of my banner should be 600? Because in the current structure of my site, it shows the transaction from one photo to another, but it doesn’t expand out of my 300px div. I see the exchange of images only within the square of 300x250.
– mab
@Maírab You need to display a 600x250 image in a space of 300x250 is that it? It would be resized?
– Pedro Souza
That’s right Peter, my space is 300x20 to display the 600x20 image. By being in a column on the right, the display must made to the left. Usually this is done with javascript, but due to the use of iframe to call the expanded image html, I am having problems with the display on the site. So I thought to opt for a possible solution in html/css3.
– mab