CSS Plus Sign

Developer
Richard
Size
1,891 Kb
Views
85,008
  1. CSS Plus Sign Previews
  2. CSS Plus Sign HTML Codes
  3. CSS Plus Sign CSS Codes

How do I make an css plus sign?

A css plus sign inside a circle.. What is a css plus sign? How do you make a css plus sign? This script and codes were developed by Richard on 31 July 2022, Sunday.

CSS Plus Sign Previews
IQ Test

CSS Plus Sign - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Plus Sign</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="circle-plus"> <div class="circle"> <div class="horizontal"></div> <div class="vertical"></div> </div>
</div>
<a href="http://upload.wikimedia.org/wikipedia/commons/1/14/Landscape_Arnisee-region.JPG" target="_blank">
<div class="container"> <div class="blackout"></div> <div class="circle-plus"> <div class="circle"> <div class="horizontal"></div> <div class="vertical"></div> </div> </div> <img src="http://upload.wikimedia.org/wikipedia/commons/1/14/Landscape_Arnisee-region.JPG">
</div>
</a>
</body>
</html>

CSS Plus Sign - Script Codes CSS Codes

.circle-plus {height:6em; width:6em; font-size:1em /*Will change icon size*/;}
.circle-plus .circle {position: relative; width: 4.5em; height: 4.5em; border-radius: 100%; border: solid .8em #DFDAD7;}
.circle-plus .circle .horizontal {position: absolute; background-color: #DFDAD7; width: 2.4em; height: .7em; top: 1.9em; left: 1.05em;}
.circle-plus .circle .vertical {position: absolute; background-color: #DFDAD7; width: .7em; height: 2.4em; top: 1.05em; left: 1.9em;}
/*Unimportant css*/
body {background-color:#9a9a9a;}
.circle-plus {margin:auto; padding:4em 0; pointer-events:none;}
.container {margin:auto; width: 500px; position: relative;}
.container img {width: 100%;}
.container .circle-plus {position:absolute; padding:0; left:0; right:0; top:0; bottom:0;}
.blackout {background-color:#212121; opacity:0; width:100%; height:100%; position:absolute; transition: opacity 0.5s ease;}
.blackout:hover {opacity:.5;}
CSS Plus Sign - Script Codes
CSS Plus Sign - Script Codes
Home Page Home
Developer Richard
Username Ketziel
Uploaded July 31, 2022
Rating 3
Size 1,891 Kb
Views 85,008
Do you need developer help for CSS Plus Sign?

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!

Richard (Ketziel) Script Codes
Name
Atomic
Responsive Image Grid with set Height
Colour Schemes
CSSman
CSS Styled Select Box
CSS Icon Collection
Flex Box Tiles
A Pen by Richard
Animated Book
Moon Orbit
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!