Sliding gradient on hover + image translate

Developer
Robert Borghesi
Size
3,267 Kb
Views
34,408
  1. Sliding gradient on hover + image translate Previews
  2. Sliding gradient on hover + image translate HTML Codes
  3. Sliding gradient on hover + image translate CSS Codes

How do I make an sliding gradient on hover + image translate?

My personal chart of the frontmen. There is a gradient that slide-in on hover above the image.. What is a sliding gradient on hover + image translate? How do you make a sliding gradient on hover + image translate? This script and codes were developed by Robert Borghesi on 27 August 2022, Saturday.

Sliding gradient on hover + image translate Previews
IQ Test

Sliding gradient on hover + image translate - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sliding gradient on hover + image translate</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="maintitle">3 FRONTMAN I DO LOVE <br><span>Hover them to reveal who they are the band where they play.</span></div> <div class="singular"> <div class="content"> <img src="http://www.iltourdinibali.it/codepens/oli.jpg" /> <div class="info"> <div class="name">Oliver Sykes</div> <div class="band">Bring me the horizon</div> </div> </div> </div> <div class="singular"> <div class="content"> <img src="http://www.iltourdinibali.it/codepens/hranica.jpg" /> <div class="info"> <div class="name">Mike Hranica</div> <div class="band">the devil wears prada</div> </div> </div> </div> <div class="singular"> <div class="content"> <img src="http://www.iltourdinibali.it/codepens/jake.jpg" /> <div class="info"> <div class="name">Jake Luhrs</div> <div class="band">August burns red</div> </div> </div> </div>
</div>
</body>
</html>

Sliding gradient on hover + image translate - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
img { max-width: 130%; height: auto; display: block;
}
html { padding: 0; padding: 0;
}
body { color: white; background-color: #424242; font-family: 'Open Sans', sans-serif;
}
.container { width: 748px; margin: 0 auto; height: 100%;
}
.maintitle { text-align: center; font-size: 56px; font-weight: 800; color: #27989C; padding: 50px 0 30px 0; line-height: 30px;
}
.maintitle span { font-weight: 300; font-size: 17px; color: white;
}
.singular { height: 300px; width: 216px; float: left; margin-right: 50px; position: relative; border: solid 10px #27989C; overflow: hidden; cursor: pointer;
}
.singular img { width: 216px; -webkit-transition: all 0.3s; transition: all 0.3s;
}
.singular:last-of-type { margin-right: 0px;
}
.content { -webkit-transition: all 0.3s; transition: all 0.3s;
}
.info { position: relative; background: #27989C; /*top: $heightsingular;*/ left: 0px; color: white; width: 100%; text-align: center; text-transform: uppercase; padding: 90px 0px 30px 0px; -webkit-transition: all 0.3s; transition: all 0.3s; /* FF3.6+ */ /* Chrome,Safari4+ */ background: -webkit-linear-gradient(rgba(39, 152, 156, 0) 0%, #27989c 100%); background: -moz-linear-gradient(rgba(39, 152, 156, 0) 0%, #27989c 100%); background: -o-linear-gradient(rgba(39, 152, 156, 0) 0%, #27989c 100%); background: linear-gradient(rgba(39, 152, 156, 0) 0%, #27989c 100%);
}
.name { font-size: 24px; font-weight: 800;
}
.band { font-size: 12px; font-weight: 300;
}
.singular .content:hover { -webkit-transform: translate(0px, -189px); transform: translate(0px, -189px);
}
.content:hover img { -webkit-transform: translate(0px, 160px); transform: translate(0px, 160px);
}
Sliding gradient on hover + image translate - Script Codes
Sliding gradient on hover + image translate - Script Codes
Home Page Home
Developer Robert Borghesi
Username dghez
Uploaded August 27, 2022
Rating 4
Size 3,267 Kb
Views 34,408
Do you need developer help for Sliding gradient on hover + image translate?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Robert Borghesi (dghez) Script Codes
Name
Pure Css Loader - Square
Enel brand - logo animation with tweenmax
Easy parallax header
Opening animation from circular avatar
SlamDunk Parallax on MouseMove
Pure custom css animation on new google logo
Continuous scrolling background of sticky header
Text-mask background moving on MouseMove - v2
Best 3 players on fifa 14 - HOVER THEM
Anaglyph 3D with CSS-blend on mouseMove
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!