Css Image Hover Effect, Increase width

HTML & CSS
2

Hi there klikThat,

and a warm welcome to these forums. :sunglasses:

Here is one possible solution…

<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://coothead.co.uk/images/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<style media="screen">
body {
    background-color: #f0f0f0;
 }
#container {
    text-align: center;
 }
#container ul {
    display: inline-block;
    padding: 0;
    margin: 0;
    list-style: none;
 }
#container li {
    position: relative;
    padding-top: 10.2em;
 }
#container a { 
    position: absolute;
    top: 0;
    left: -8em;
    z-index: 0;
    width: 16em;
    padding: 0.15em;
    border: 0.06em solid #999;
    background: #fff;
    box-shadow:0 0 0 #fff;
    opacity: 0.75;
    transition: all 1s ease
 }
#container img {
    display: block;
    width: 100%;
    height: auto;
 }
#container a:hover {
    z-index: 200;
    left: -16em;
    width: 32em;
    padding: 0.3em;
    box-shadow: 0.6em 0.6em 0.6em #666;
    opacity: 1;
 }
#container li:nth-child(2) a:hover {
    top: -50%;
 }
#container li:nth-child(3) a:hover {
    top: -100%;
 }
</style>
</head>
<body> 
<div id="container">
<ul>
 <li><a href="#"><img src="face-1.jpg" alt="face one"></a></li>
 <li><a href="#"><img src="gaze.gif" alt="gaze"></a></li>
 <li><a href="#"><img src="face-2.jpg" alt="face two"></a></li>
</ul>
<!-- #container --></div>
</body>
</html>

coothead

1 Like