Restando nell'ambito del "pure-css", una soluzione potrebbe essere questa:
codice:
<!DOCTYPE HTML>
<html lang="it">
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style>
.lavagna{
display: inline-flex;
flex-direction: column;
margin-right: 150px;
width: 800px;
height: 600px;
position: relative;
border: 1px solid #ddd;
border-radius: 4px;
}
.lavagna>div{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 4px;
opacity: 0;
visibility: hidden;
transition: .5s .2s;
}
.lavagna>div>img{
max-width: 100%;
max-height: 100%;
}
.lavagna>input,
.lavagna>span{
display: inline-block;
position: relative;
left: 100%;
}
.lavagna>input{
margin: 0 6px -10px;
width: 30px;
height: 20px;
background: #eee;
border-radius: 3px;
border: 1px solid #999;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
z-index: 1;
outline: 0;
cursor: pointer;
}
.lavagna>span{
top: -10px;
width: 150px;
font: 12px/20px Verdana, Geneva, sans-serif;
text-indent: 40px;;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: default;
}
.lavagna>input:hover,
.lavagna>input:focus{
background: #9ce;
}
.lavagna>input:checked{
background: #48d;
}
.lavagna>input:hover+span+div,
.lavagna>input:focus+span+div{
visibility: visible;
opacity: .5;
}
.lavagna>input:checked+span+div{
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="lavagna">
<input type="checkbox" checked> <span>Cover</span> <div><img src="Cover.png" alt=""></div>
<input type="checkbox"> <span>Colore 1</span> <div><img src="Colore8016.png" alt=""></div>
<input type="checkbox"> <span>Colore 2</span> <div><img src="Colore9016.png" alt=""></div>
<input type="checkbox"> <span>Colore 3</span> <div><img src="Colore7035.png" alt=""></div>
<input type="checkbox"> <span>Maniglia</span> <div><img src="Maniglia.png" alt=""></div>
</div>
</body>
</html>
Permessi di invio
Rispondi quotando