Hover with css triangle as transparent arrow

Developer
Jay
Size
2,460 Kb
Views
4,048
  1. Hover with css triangle as transparent arrow Previews
  2. Hover with css triangle as transparent arrow HTML Codes
  3. Hover with css triangle as transparent arrow CSS Codes

How do I make an hover with css triangle as transparent arrow?

This image will hover with a cover that has transparent arrow drawn with css triangle.Problem with this pen is the height has to be preset. If anyone can make the width and height dynamic according to image (without using javascript), it would be perfect!. What is a hover with css triangle as transparent arrow? How do you make a hover with css triangle as transparent arrow? This script and codes were developed by Jay on 14 January 2023, Saturday.

Hover with css triangle as transparent arrow Previews
IQ Test

Hover with css triangle as transparent arrow - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hover with css triangle as transparent arrow</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="hoverable"> <img src="http://i470.photobucket.com/albums/rr61/JediGunship/grumpy-cat-8141_preview_zps9177ab07.png" /> <div class="cover"> <div class="cover-top"></div>	<div class="cover-mid">	<div class="cover-mid-left"> <div class="cover-triangle-top"></div> <div class="cover-triangle-bottom"></div>	</div> <div class="cover-mid-right"></div>	</div> <div class="cover-bottom"></div> </div>
</a>
</body>
</html>

Hover with css triangle as transparent arrow - Script Codes CSS Codes

.hoverable { width: 80px; position: relative; overflow: hidden; display: block;
}
.hoverable img { height: 100px;
}
.hoverable .cover { width: 100%; height: 100%; position: absolute; top: 0; left: 100%; transition: left 1s;
}
.hoverable .cover .cover-top, .hoverable .cover .cover-bottom { height: 40px; width: 100%; background: #facb30;
}
.hoverable .cover .cover-mid { height: 20px; width: 100%;
}
.hoverable .cover .cover-mid .cover-mid-left { float: left;
}
.hoverable .cover .cover-mid .cover-mid-left .cover-triangle-top { width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent #facb30 transparent transparent;
}
.hoverable .cover .cover-mid .cover-mid-left .cover-triangle-bottom { width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent #facb30 transparent;
}
.hoverable .cover .cover-mid .cover-mid-right { background: #facb30; height: 20px; float: left; width: 70px;
}
.hoverable .cover .cover-bottom { clear: both;
}
.hoverable:hover .cover { left: 0;
}
Hover with css triangle as transparent arrow - Script Codes
Hover with css triangle as transparent arrow - Script Codes
Home Page Home
Developer Jay
Username jaycode
Uploaded January 14, 2023
Rating 3
Size 2,460 Kb
Views 4,048
Do you need developer help for Hover with css triangle as transparent arrow?

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!

Jay (jaycode) Script Codes
Name
Smoothwheel
A Pen by Jay
Bare Necessity Horizontal Accordion
Is Mobile
Wait until all interchange images loaded
Create amazing art & images 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!