Expanding images CSS study

by Gerald Fullam

HTML

<div class="images">
    <div class="image image1" tabindex="0"><img src="http://placehold.it/500x200/00ff01/ffffff" alt="" /></div>
    <div class="image image2" tabindex="0"><img src="http://placehold.it/500x200/ff00ff/ffff01" alt="" /></div>
    <div class="image image3" tabindex="0"><img src="http://placehold.it/500x200/01ffff/ffffff" alt="" /></div>
    <div class="image image4" tabindex="0"><img src="http://placehold.it/500x200/ffff01/ffffff" alt="" /></div>
</div>

CSS

.images {
    width: 500px;
    height: 200px;
    overflow: hidden;
    position: relative;
}
.image {
    position: absolute;
    width: 25%;
    height: 100%;
    float: left;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid white;
    transition: all .3s ease;
}
.image1 {
    left: 0;
}
.image2 {
    left: 25%;
}
.image3 {
    left: 50%;
}
.image4 {
    left: 75%;
}
.image img {
    position: absolute;
    left: 50%;
    margin-left: -250px;
}
.image:focus {
    width: 100%;
    left: 0;
    right: 0;
    transition: all .3s ease;
    z-index: 1;
    outline: 0;
}