Afficher/masquer le menu
Liens Ecyseo
  • Tags cloud
  • Daily
  • Pictures wall
  • Search
  • Display options
    • Links per page :
    • 20 links
    • 50 links
    • 100 links
  • RSS Feed
  • Login

J'ai besoin d'intimité. Non pas parce que mes actions sont douteuses, mais parce que votre jugement et vos intentions le sont.

5165 links 

page 1 / 1

Liste des liens

CSS - Menu on image hover - 30 seconds of code
2023-11-5 3:49 - permalink -
Home Pricing About

.hover-menu {
position: relative;
overflow: hidden;
margin: 8px;
min-width: 340px;
max-width: 480px;
max-height: 290px;
width: 100%;
background: #000;
text-align: center;
box-sizing: border-box;
}

.hover-menu * {
box-sizing: border-box;
}

.hover-menu img {
position: relative;
max-width: 100%;
top: 0;
right: 0;
opacity: 1;
transition: 0.3s ease-in-out;
}

.hover-menu div {
position: absolute;
top: 0;
left: -120px;
width: 120px;
height: 100%;
padding: 8px 4px;
background: #000;
transition: 0.3s ease-in-out;
display: flex;
flex-direction: column;
justify-content: center;
}

.hover-menu div a {
display: block;
line-height: 2;
color: #fff;
text-decoration: none;
opacity: 0.8;
padding: 5px 15px;
position: relative;
transition: 0.3s ease-in-out;
}

.hover-menu div a:hover {
text-decoration: underline;
}

.hover-menu:hover img {
opacity: 0.5;
right: -120px;
}

.hover-menu:hover div {
left: 0;
opacity: 1;
}

css menu
- https://www.30secondsofcode.org/css/s/image-hover-menu/
page 1 / 1


Tags


  • shaarli
  • wikipedia

Tags cloud

Shaarli - The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community - Help/documentation
Affiches "loi aviva" créées par Geoffrey Dorne le 13 Mai, 2020 - Mastodon 1 - Mastodon 2