Css image viewer
How do I make an css image viewer?
Visit http://fivera.net/. What is a css image viewer? How do you make a css image viewer? This script and codes were developed by Fivera on 31 January 2023, Tuesday.
Css image viewer - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>css image viewer</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper"> <!-- Tabs --> <ul> <li><a href="#image1" id="tab1"><img src="http://fivera.net/wp-content/uploads/2013/11/t1.jpg" alt="" title="" /></a></li> <li><a href="#image2" id="tab2"><img src="http://fivera.net/wp-content/uploads/2013/11/t2.jpg" alt="" title="" /></a></li> <li><a href="#image3" id="tab3"><img src="http://fivera.net/wp-content/uploads/2013/11/t3.jpg" alt="" title="" /></a></li> <li><a href="#image4" id="tab4"><img src="http://fivera.net/wp-content/uploads/2013/11/t4.jpg" alt="" title="" /></a></li> </ul> <!-- Images --> <div id="images"> <div><a name="image1"></a><img src="http://fivera.net/wp-content/uploads/2013/11/cd1.png" alt="" title="" /></div> <div><a name="image2"></a><img src="http://fivera.net/wp-content/uploads/2013/11/cd2.png" alt="" title="" /></div> <div><a name="image3"></a><img src="http://fivera.net/wp-content/uploads/2013/11/cd3.png" alt="" title="" /></div> <div><a name="image4"></a><img src="http://fivera.net/wp-content/uploads/2013/11/cd4.png" alt="" title="" /></div> </div> </div>
</body>
</html>
Css image viewer - Script Codes CSS Codes
/* CSS Reset */ * { margin: 0; padding: 0; border: 0; outline: 0; } /* Setup Tabs */ ul{ background:#000; width:125px; /* Width of Tab Image */ float: left; list-style: none; border-right:8px solid black; } ul li{ height:75px; /* Height of Tab Image */ } /* Setup Tab so normal opacity is 40 and rollover is 100 */ ul li a img{ /* for IE */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter:alpha(opacity=40); /* CSS3 standard */ opacity:0.4; } /* Change Opacity to 100% on roll over */ ul li a:hover img{ /* for IE */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); /* CSS3 standard */ opacity:1.0; } /* Places images to the right of the tabs, and hides non selected images */ #images{ width:500px; height:300px; overflow:hidden; /* Hides the non selected images */ float:left; } /* Places a black border around the entire viewer and centers it on the screen */ #wrapper{ margin-top:12px; width:633px; height:300px; border:8px solid black; }
Developer | Fivera |
Username | fivera |
Uploaded | January 31, 2023 |
Rating | 3 |
Size | 2,054 Kb |
Views | 8,096 |
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!
Name | Size |
Social example 3 | 2,173 Kb |
Pattern example 7 | 1,512 Kb |
Mac style Doc menu by fivera.net | 2,376 Kb |
Css3 buttons | 6,911 Kb |
Simple image crossfade | 1,580 Kb |
Fivera | 2,490 Kb |
Heartbeat css animation | 2,336 Kb |
Another brick in the wall | 1,955 Kb |
Paper text area | 2,064 Kb |
Rotate | 1,508 Kb |
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!
Name | Username | Size |
Pure CSS Menu | Bronsrobin | 3,321 Kb |
This in constructor context | _shree33 | 1,718 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
Factorial | KeithleySLHS | 1,158 Kb |
Custom Select Element | Agrayson | 3,616 Kb |
Blog demo to use given styling | Andygirl | 2,412 Kb |
Pagepilling.js | Blossk | 6,554 Kb |
Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 Kb |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!