Rub it

Developer
Sleezyjus
Size
2,306 Kb
Views
24,288
  1. Rub it Previews
  2. Rub it HTML Codes
  3. Rub it CSS Codes

How do I make an rub it?

What is a rub it? How do you make a rub it? This script and codes were developed by Sleezyjus on 10 September 2022, Saturday.

Rub it Previews
IQ Test

Rub it - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>rub it</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Raleway:400,800,300' rel='stylesheet' type='text/css'>
<div class="grid">
<figure class="effect-roxy">
<img src="http://i.huffpost.com/gen/1449869/images/o-JAY-Z-BARNEYS-RACIAL-PROFILING-facebook.jpg" alt="img13"/>
<figcaption>
<h2>Jigga<span>Man</span></h2>
<p>Politics as Usual</p>
<a href="#">View more</a>
</figcaption>
</figure>
</body>
</html>

Rub it - Script Codes CSS Codes

.grid figure {	position: relative;	float: left;	overflow: hidden;	margin:0;	height:300px;	width: 48%;	background: #3085a3;	text-align: center;	cursor: pointer; background-position:center center; background-repeat:no-repeat;
z-index:2;
}
.grid img{ e background:#000 !important; position:absolute; object-fit:cover; bottom:; display:block; max-width:auto; width:100%; height:100%; z-index:-1;
}
.grid figure figcaption {	padding: 2em;	color: #fff;	text-transform: uppercase;	font-size: 1.25em;	-webkit-backface-visibility: hidden;	backface-visibility: hidden;
}
.grid figure figcaption::before,
.grid figure figcaption::after {	pointer-events: none;
}
.grid figure figcaption > a {	z-index: 1000;	text-indent: 200%;	white-space: nowrap;	font-size: 0;	opacity: 0;
}
.grid figure h2 {	word-spacing: -0.15em;	font-weight: 300;
}
.grid figure h2 span {	font-weight: 800;
}
.grid figure h2,
.grid figure p {	margin: 0;
}
.grid figure p {	letter-spacing: 1px;	font-size: 68.5%;
}
figure.effect-roxy {	background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);	background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);
}
figure.effect-roxy img {	max-width: none;	width: -webkit-calc(100% + 60px);	width: calc(100% + 60px);	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;	transition: opacity 0.35s, transform 0.35s;	-webkit-transform: translate3d(-50px,0,0);	transform: translate3d(-50px,0,0);
}
figure.effect-roxy figcaption::before {	position: absolute;	top: 30px;	right: 30px;	bottom: 30px;	left: 30px;	border: 1px solid #fff;	content: '';	opacity: 0;	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;	transition: opacity 0.35s, transform 0.35s;	-webkit-transform: translate3d(-20px,0,0);	transform: translate3d(-20px,0,0);
}
figure.effect-roxy figcaption {	padding: 3em;	text-align: left;
}
figure.effect-roxy h2 {	padding: 30% 0 10px 0;
}
figure.effect-roxy p {	opacity: 0;	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;	transition: opacity 0.35s, transform 0.35s;	-webkit-transform: translate3d(-10px,0,0);	transform: translate3d(-10px,0,0);
}
figure.effect-roxy:hover img {	opacity: 0.7;	-webkit-transform: translate3d(0,0,0);	transform: translate3d(0,0,0);
}
figure.effect-roxy:hover figcaption::before,
figure.effect-roxy:hover p {	opacity: 1;	-webkit-transform: translate3d(0,0,0);	transform: translate3d(0,0,0);
}
Rub it - Script Codes
Rub it - Script Codes
Home Page Home
Developer Sleezyjus
Username sleezyjus
Uploaded September 10, 2022
Rating 3
Size 2,306 Kb
Views 24,288
Do you need developer help for Rub it?

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!

Sleezyjus (sleezyjus) Script Codes
Name
A Pen by sleezyjus
Drag to pan image
Vyb slider
Google_mapping
Off-canvas clickings
Banana__split
Yeezy
Feel my color
Scrollex
Simple css animate
Create amazing captions 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!