How to create expandable banner only with HTML5 and CSS3?

Question

How to create expandable banner only with HTML5 and CSS3?

Navigation

#1 by (1 votes)

4

I need to create a banner in HTML / CSS that uses only two images in JPG / GIF. The first image will have 300x250px and the second image 600x250px. The first image will be displayed and the mouse over will expand and display the second image.

When displaying the second image, it must have an external link.

javascript html5 css3

asked by anonymous 08.06.2017 / 20:43

1 answer

How to call another PHP page within a PHP page Defining a tree structure in ruby on rails

score 1 · Answer 1

You can do this with 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 href property.