News

Build hidden images that slide in on click with CSS

Provide additional information when space is limited or when you need to keep presentation simple

GrowLBW

Provide additional information when space is limited or when you need to keep presentation simple

GrowLBW


GET THE CODE FOR THIS TUTORIAL NOW

1. Create the body

We will create our HTML document in this step, with links to the external stylesheet and JavaScript code in the head section. The body section contains the website content, defined in Step 2.

2. Define content

The page consists of a data-tiles container, which stores individual tile groups. Each tile group contains a <span> that wraps the individual tile elements, which are also <span> elements with set background images. Additional content can be placed inside the most inner elements.

<section data-tiles="tiles1">
<a id="box1" href="#box1">
<span>
<span style="background-image:url('img/1.jpg');"></span>
<span style="background:red"></span>
<span style="background:yellow"></span>
</span>
</a>
<a id="box2" href="#box2">
<span>
<span style="background-image:url('img/2.jpg');"></span>
<span style="background:red"></span>
<span style="background:yellow"></span>
</span>
</a>
<a id="box3" href="#box3">
<span>
<span style="background-image:url('img/3.jpg');"></span>
<span style="background:red"></span>
<span style="background:yellow"></span>
</span>
</a>
</section>



3. Set group and tile containers

The group container will be displayed as a block element with a height of 380 pixels. All of its inner elements will have a transition lasting one second. First-level children, the tile containers, will display as inline-block elements so they are placed next to each other – they will be one third width and full height of their container element. Insert these instructions into the styles.css file.

[data-tiles]{
display: block;
height: 380px;
}
[data-tiles] *{
transition: all 1s;
}
[data-tiles] > *{
display: inline-block;
width: 33%;
height: 100%;
}

4. Position the tiles

Individual tiles are set to be the full width and height of their container. The <span> inside the <a> tag by default covers the full size of the <a> container. Each of its inner tiles are absolutely positioned at the top left, with only the first tile being shown with full opacity. Background images are also set to cover the available space – allowing resizing without distorting the image.

[data-tiles] > * > span{
position: relative;
display: block;
width: 100%;
height: 100%; }
[data-tiles] > * > span > *{
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background-size: cover; }
[data-tiles] > * > span > *:first-child{
opacity: 1; }

5. Use absolute positioning

The tile ID that has been targeted by the URI reference will change its size and positioning to cover the full screen. To achieve this, it must use absolute positioning with a z-index that can be guaranteed to be above all other page content. A transparent black background is also used to make other page content less noticeable.

6. Open elements

Elements inside the target container are changed to appear open. The inner <span> tag has its size and positioning changed to cover most of the transparent background. The elements that are direct children to the <span> are changed to display as inline-block elements and resized to appear open at one third of the available width. All elements are set to visible – revealing any tiles that were previously hidden.

[data-tiles] > *:target > span{
width: 75%;
height: 75%;
left: 12.5%;
top: 12.5%;
overflow: hidden;
}
[data-tiles] > *:target > span > *{
position: relative;
display: inline-block;
float: left;
width: 32%;
opacity: 1; }

7. Place a close link

A close link will be placed inside the <a> tag of each tile group – this itself will be an <a> tag with an href of # to change the target from any currently selected ID. This element needs to be hidden by default, but display clearly when its parent is open. Font size, border and positioning are set in preparation.

#loading > * > *{
[data-tiles] > * > a{
display: none;
position: absolute;
right: 5%;
top: 5%;
font-size: 2em;
font-weight: bold;
text-decoration: none;
color: #fff;
border: 2px solid #fff;
border-radius: 100%;
padding: .2em .5em;}
[data-tiles] > *:target > a{
display: block;}

8. JavaScript close link

The only part that JavaScript is required for is to insert a close link inside each of the tile containers. This could be done manually in HTML, but would prove to be more difficult if the close link needed to be changed later. Using JavaScript for this also reduces the page size – especially if there are a lot tiles. Place this code inside the code.js file.

window.addEventListener("load",function(){
$("[data-tiles] > *").append("<a href='#'>&times;</a>")
});

GET THE LATEST ISSUE OF WEB DESIGNER NOW


×