Large horizontal menu with CSS3 transitions & opaque text

Developer
Stathis
Size
3,431 Kb
Views
46,552
  1. Large horizontal menu with CSS3 transitions & opaque text Previews
  2. Large horizontal menu with CSS3 transitions & opaque text HTML Codes
  3. Large horizontal menu with CSS3 transitions & opaque text CSS Codes

How do I make an large horizontal menu with css3 transitions & opaque text?

Large horizontal menu with CSS3 transitions & opaque text (link to tutorial).. What is a large horizontal menu with css3 transitions & opaque text? How do you make a large horizontal menu with css3 transitions & opaque text? This script and codes were developed by Stathis on 02 August 2022, Tuesday.

Large horizontal menu with CSS3 transitions & opaque text Previews
IQ Test

Large horizontal menu with CSS3 transitions & opaque text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Large horizontal menu with CSS3 transitions & opaque text</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="container"> <nav class="menu-container"> <ul> <li><a href="#">Some cool quote about <strong>home</strong></a><img src="http://static.burnmind.com/demos/css3-menu-transitions/images/home.jpg" alt="Some cool quote about home" /></li> <li><a href="#">Some cool quote about <strong>movies</strong></a><img src="http://static.burnmind.com/demos/css3-menu-transitions/images/movies.jpg" alt="Some cool quote about movies" /></li> <li><a href="#">Some cool quote about <strong>music</strong></a><img src="http://static.burnmind.com/demos/css3-menu-transitions/images/music.jpg" alt="Some cool quote about music" /></li> <li><a href="#">Some cool quote about <strong>games</strong></a><img src="http://static.burnmind.com/demos/css3-menu-transitions/images/games.jpg" alt="Some cool quote about games" /></li> <li><a href="#">Some cool quote about <strong>books</strong></a><img src="http://static.burnmind.com/demos/css3-menu-transitions/images/books.jpg" alt="Some cool quote about books" /></li> <li><a href="#">Some cool quote about <strong>art</strong></a><img src="http://static.burnmind.com/demos/css3-menu-transitions/images/art.jpg" alt="Some cool quote about art" /></li> </ul> </nav> <article> <p>This is a demo of the <a href="http://burnmind.com/tutorials/ccs3-menu-transitions">How to create a large CCS3 menu with transitions</a> tutorial @ <a href="http://burnmind.com/">burnmind.com</a>.</p> <p>Try the other two versions: <a href="http://codepen.io/stathisg/details/kihan?preview_height=700">Horizontal</a> &amp; <a href="http://codepen.io/stathisg/details/mvzdj?preview_height=800">Vertical</a>.</p> <p>Credits: <a href="http://dribbble.com/shots/472966-Texture-for-Web">texture</a>, icons <a href="http://thenounproject.com/noun/home/#icon-No1662">1</a>, <a href="http://thenounproject.com/noun/movie/#icon-No18142">2</a>, <a href="http://thenounproject.com/noun/music/#icon-No11941">3</a>, <a href="http://thenounproject.com/noun/game/#icon-No8609">4</a>, <a href="http://thenounproject.com/noun/book/#icon-No2574">5</a>, <a href="http://thenounproject.com/noun/art-gallery/#icon-No2416">6</a>.</p> <p class="lorem-ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in massa id orci faucibus laoreet eget sed tortor. Phasellus auctor est a metus faucibus, nec tristique est molestie. Nunc malesuada, erat sed suscipit ornare, elit lorem placerat turpis, vel pellentesque est ligula id nisi. Curabitur feugiat libero auctor bibendum consequat. Pellentesque ut pellentesque velit, sed sodales nunc. Nulla facilisi. Ut nec libero eu nunc suscipit facilisis ut non magna. Fusce ornare vel nibh vel scelerisque. Integer lacus magna, porttitor congue suscipit et, pellentesque sed ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus libero nunc, gravida vitae dictum ut, tincidunt nec sapien. Integer purus metus, malesuada quis bibendum nec, semper quis lorem. Pellentesque et libero vel justo accumsan eleifend. Etiam lorem mauris, convallis at mi eget, convallis placerat orci. Vestibulum luctus laoreet tellus eu gravida. Phasellus lobortis urna vel odio fringilla rhoncus.</p> <p class="lorem-ipsum">Nunc dignissim risus lobortis dictum cursus. Proin ornare laoreet gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi tincidunt enim in blandit congue. Phasellus placerat sapien vitae aliquet lobortis. Ut urna erat, commodo at euismod vel, iaculis ac elit. Vivamus mollis nibh rutrum dolor dignissim aliquam. Donec in enim ac purus sollicitudin adipiscing. Maecenas tincidunt, nibh ac tristique rhoncus, turpis sapien aliquam dui, nec sollicitudin diam purus vitae massa. Nulla posuere nisl eget justo ullamcorper sollicitudin. In a fringilla lacus. Nullam suscipit eros eu nulla convallis, a placerat est egestas. Maecenas sit amet velit ac tellus volutpat tincidunt. Ut vitae nisl purus. Curabitur vulputate iaculis ligula, non egestas massa auctor in.</p> </article>
</section>
</body>
</html>

Large horizontal menu with CSS3 transitions & opaque text - Script Codes CSS Codes

html
{ background-image: url('http://static.burnmind.com/demos/css3-menu-transitions/images/texture.jpg'); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 2%; font-size: 1em; }
a
{ color: #0CC5DA; text-decoration: none;
}
a:hover
{ color: #DCE808; text-decoration: underline;
}
p
{ margin: 0 0 1em 0; padding: 0; line-height: 1.4em;
}
.container
{ margin: 0 auto; width: 960px;
}
article
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 1em; width: 100%; float: left; background-color: #fff;
}
article p.lorem-ipsum
{ color: #ccc;
}
.menu-container
{ width: 100%; float: left; background-color: #fff;
}
.menu-container ul, .menu-container li
{ margin: 0; padding: 0; list-style: none; position: relative;
}
.menu-container li
{ float: left; width: 16.66666666666667%;
}
.menu-container li img
{ width: 100%;
}
.menu-container li a
{ line-height: 1.4em; font-size: 1.5em; padding: 10%; background-color: #000; color: #fff; position: absolute; width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: rgba(0, 0, 0, 0); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#80000000', EndColorStr='#80000000'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#80000000', EndColorStr='#80000000')"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.menu-container li a:hover
{ text-decoration: none; width: 110%; height: 110%; margin-top: -5%; margin-left: -5%; padding: 14%; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; background-color: rgba(0, 0, 0, 0.7); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#80000000', EndColorStr='#80000000'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#80000000', EndColorStr='#80000000')";
}
Large horizontal menu with CSS3 transitions & opaque text - Script Codes
Large horizontal menu with CSS3 transitions & opaque text - Script Codes
Home Page Home
Developer Stathis
Username stathisg
Uploaded August 02, 2022
Rating 3
Size 3,431 Kb
Views 46,552
Do you need developer help for Large horizontal menu with CSS3 transitions & opaque text?

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!

Stathis (stathisg) Script Codes
Name
Large horizontal menu with CSS3 transitions
Large vertical menu with CSS3 transitions
A slideshow with a blinds transition
Mosaic transition effect between two photos using jQuery
Create amazing sales emails 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!