All Collections
Eshop
CSS Snippet Codes
CSS Snippet Codes

Tips and snippets codes for your Eshop

Updated over a week ago

Hide cookie banner during edition:

#cookies {
display: none;
}

Change cookie banner background color:

#cookies > .content {
background-color: #89d3e1 !important;
}

Add a hover statut color for icons:

.cg-icon-play:hover,
.cg-icon-wantlist:hover {
color: #5236ff;
}

Set mobile menu background color:

#mobileMenu {
background-color: #000 !important;
}

Add tracklist animations:

.track.playable {
transition-duration: 0.6s;
opacity: 1;
padding: 10px;
text-overflow: ellipsis !important;
}

.track.playable:hover {
background-color: #efff5a;
transition-duration: 0.2s;
opacity: 1;
padding: 10px;
padding-left: 4%;
text-overflow: ellipsis !important;
}

.track.playable:active {
background-color: #efff5a;
transition-duration: 0.5s;
opacity: 1;
padding: 10px;
padding-left: 5%;
text-overflow: ellipsis !important;
}

Add styles animations:

.styles {
padding-top: 10px;
line-height:30px;
}

.styles > a {
margin-right: 10px;
color: #fff;
padding: 4px;
background-color: #5e5e5e;
border-radius: 5px;
}

.styles > a:hover {
margin-right: 10px;
color: #000;
padding: 4px;
background-color: #d7d7d7;
border-radius: 5px;
transition-duration: 0.5s;
opacity: 1;
}

Add animations on tiles artworks:

.tile img:hover {
transform: scale(1.02); /* Équivalent à scaleX(0.7) scaleY(0.7) */
transition-duration: 0.1s;
}

img {
border-radius: 30px !important;
transition-duration: 0.3s;
}

Add gradient colors to header navigation:

#header {
background: linear-gradient(
0deg,
rgba(255, 255, 255, 0),
rgba(0, 255, 144, 1)
);
position: sticky;
top: 0;
}

Add animation for items buy/share/wantlist buttons:

#item > .content .buttons .buyButton,
#item > .content .buttons .shareButton,
#item > .content .buttons .wantlistButton,
#item > .content .buttons .snippetDownload {
border-bottom: 1px solid;
padding: 0px;
padding-bottom: 10px;
border-color: #dfdfdf;
}

#item > .content .buttons .buyButton:hover,
#item > .content .buttons .shareButton:hover,
#item > .content .buttons .wantlistButton:hover,
#item > .content .buttons .snippetDownload:hover {
border-bottom: 5px solid;
transition-duration: 0.5s;
padding: 0px;
padding-bottom: 10px;
border-color: #5e5e5e;
}

Add text animations (marquee):

<marquee>This text will scroll from right to left</marquee> <marquee direction="up">This text will scroll from bottom to top</marquee> <marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> <marquee behavior="alternate"> This text will bounce </marquee> </marquee>
Did this answer your question?