I've been trying to create an image that on hover a caption will slide out from left to right on top and from left to right on bottom. I've gotten it working on two seperate images ie: one image has the top caption and one image has the bottom caption; however I can't seem to get both working on one image. Also I'm trying to get the captions and image to scale to the container which is boggling me. Another thing I was trying is to insert two divs into the top slide caption and get them to scale to the size but I couldn't get it going.
Here's my code at the moment:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>slide caption thingy</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="wrapper">
<header>
<h1 class="main_head">hj</h1>
</header>
<hr />
<div class="container left">
<img src="images/1.jpg" alt="image" />
<article class="text css3-3 css3-4">
<h1>space1 </h1>
</article>
</div>
<div class="container right">
<img src="images/2.jpg" alt="image" />
<article class="text css3-4">
<h1>space2</h1>
</article>
</div>
<hr />
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
}
.wrapper {
margin: 0 auto;
width: 960px;
padding: 30px;
position: relative;
}
.left {
float: left;
}
.right {
float: right;
}
hr {
border: none;
width: 100%;
height: 7px;
margin: 10px 0 10px 0;
clear: both;
}
a {
text-shadow: 1px 1px #efefef;
text-decoration: none;
}
b {
text-shadow: 1px 1px #efefef;
text-decoration: none;
}
header h1.main_head {
font: 36px/18px Georgia, Arial, sans-serif;
color: #838383;
text-shadow: 1px 1px #efefef;
text-align: center;
padding: 20px 0 20px 0;
}
.container {
border: 10px solid #fff;
position: relative;
overflow: hidden;
height: 200px;
-webkit-box-shadow: 0 0 3px #000;
-moz-box-shadow: 0 0 3px #000;
box-shadow: 0 0 3px #000;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.container:hover {
cursor: pointer;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}
.container2 {
border: 10px solid #fff;
position: relative;
overflow: hidden;
height: 200px;
-webkit-box-shadow: 0 0 3px #000;
-moz-box-shadow: 0 0 3px #000;
box-shadow: 0 0 3px #000;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.container2:hover {
cursor: pointer;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}
.text {
background: rgba(0,0,0,0.5);
color: white;
font: 14px Georgia,serif;
height: 80px;
width: inherit;
position: absolute;
}
.text a {
color: #fff;
display: block;
padding: 15px;
font-size: 16px;
font-weight: normal;
text-shadow: none;
text-decoration: none;
width: 400px;
}
/* CSS3 Right Effect */
article.css3-3 {
right: -400px;
top: 0;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
width: 400px;
}
.text a.css3-3 {
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .5s ease-out;
transition: all .4s ease-out;
}
.text a.css3-3:hover {
color: #d0206a;
text-decoration: none;
}
.container:hover article.css3-3 {
right: 0;
}
/* CSS3 Left Effect */
article.css3-4 {
left: -400px;
bottom: 0;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
width: 400px;
}
.text a.css3-4 {
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .5s ease-out;
transition: all .4s ease-out;
}
.text a.css3-4:hover {
color: #d0206a;
text-decoration: none;
}
.container:hover article.css3-4 {
left: 0;
}
Maybe I'm not understanding correctly, but is this what you're looking for?
<div class="container right">
<img src="http://placehold.it/350x150" alt="image" />
<article class="text css3-4">
<h1>space1</h1>
</article>
<article class="text css3-3 css3-4">
<h1>space2 </h1>
</article>
</div>
Related
This issue is a little bit complicated. I am trying to position some images in the order you can in this fiddle, but I had to add a parent div for the images so they could work properly with an animated box that displays the names of the people the images represent. The issue lies with the div not lining up the way the images do as just being lone img tags. Any help with this would be extremely appreciated.
body {
background: #7d7d7d;
}
h2 {
font-family: Pacifico;
font-size: 10px;
font-style: normal;
font-variant: normal;
font-weight: 200;
color: white;
line-height: 0px;
}
#friends {
position: absolute;
width: 200px;
height: 20px;
top: 50px;
right: 200px;
padding-top: 4px;
border: 1px solid white;
z-index: -10;
background-color: #000;
font-family: arial;
text-align: center;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#friends:hover {
height: 240px;
border-radius: 10px;
}
.peeps {
position: relative;
margin-top: 5px;
margin-right: 5px;
width: 50px;
height: 50px;
}
.sam, .ys, .kani, .ash, .adam, .lit, .tsun, .lara, .bath {
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 100%;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
.sam:hover {
border-radius: 0;
box-shadow: 0px 0 15px #a2dfe0;
}
#name {
position: absolute;
margin-top: -20px;
height: 20px;
width: 0px;
opacity: 0;
vertical-align: middle;
line-height: 15px;
background-color: #000;
border: 1px solid white;
overflow: hidden;
z-index: -1;
left: 50%;
transform: translate(-50%, 0);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.peeps:hover #name {
margin-top: -85px;
height: 20px;
width: 50px;
opacity: 1;
background-color: #000;
color: #000;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
<html>
<div id="friends">
<br><br><!-- jsfiddle doesn't like my text -->
<div class="peeps">
<img class="sam" src="http://usd.chatango.com/profileimg/s/a/samantha/thumb.jpg" />
<p id="name" style="text-align: center;">
<font color="white" size="1">Ugh</font>
</p>
</div>
<div class="peeps">
<img class="ys" src="http://usd.chatango.com/profileimg/y/s/ys/thumb.jpg">
<p id="name" style="text-align: center;">
<font color="white" size="1">Ugh</font>
</p>
</div>
<div class="peeps">
<img class="kani" src="http://usd.chatango.com/profileimg/k/a/kaninkiller/thumb.jpg">
<p id="name" style="text-align: center;">
<font color="white" size="1">Ugh</font>
</p>
</div>
</div>
</html>
If I understand your question correctly just set the .peeps class to display:inline-block;. Here is a snippet.
body {
background: #7d7d7d;
}
h2 {
font-family: Pacifico;
font-size: 10px;
font-style: normal;
font-variant: normal;
font-weight: 200;
color: white;
line-height: 0px;
}
#friends {
position: absolute;
width: 200px;
height: 20px;
top: 50px;
right: 200px;
padding-top: 4px;
border: 1px solid white;
z-index: -10;
background-color: #000;
font-family: arial;
text-align: center;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#friends:hover {
height: 240px;
border-radius: 10px;
}
.peeps {
position: relative;
margin-top: 5px;
margin-right: 5px;
width: 50px;
height: 50px;
display:inline-block;
}
.sam, .ys, .kani, .ash, .adam, .lit, .tsun, .lara, .bath {
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 100%;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
.sam:hover {
border-radius: 0;
box-shadow: 0px 0 15px #a2dfe0;
}
#name {
position: absolute;
margin-top: -20px;
height: 20px;
width: 0px;
opacity: 0;
vertical-align: middle;
line-height: 15px;
background-color: #000;
border: 1px solid white;
overflow: hidden;
z-index: -1;
left: 50%;
transform: translate(-50%, 0);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.peeps:hover #name {
margin-top: -85px;
height: 20px;
width: 50px;
opacity: 1;
background-color: #000;
color: #000;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
<div id="friends">
<br><br> <!-- jsfiddle doesn't like my text -->
<img class="sam" src="http://usd.chatango.com/profileimg/s/a/samantha/thumb.jpg">
<img class="ys" src="http://usd.chatango.com/profileimg/y/s/ys/thumb.jpg">
<img class="kani" src="http://usd.chatango.com/profileimg/k/a/kaninkiller/thumb.jpg">
<img class="ash" src="http://usd.chatango.com/profileimg/m/u/multiplelovearrows/thumb.jpg">
<img class="adam" src="http://usd.chatango.com/profileimg/t/i/tiefier/thumb.jpg">
<img class="lit" src="http://usd.chatango.com/profileimg/l/i/littered/thumb.jpg">
<img class="tsun" src="http://usd.chatango.com/profileimg/n/i/nicholle/thumb.jpg">
<img class="lara" src="http://usd.chatango.com/profileimg/h/o/hopefulhero/thumb.jpg">
<img class="bath" src="http://usd.chatango.com/profileimg/m/a/maytimes/thumb.jpg">
</div>
I need to Bring button to the front of Dropdown list in my dropdown button. Even though I have set the z-index:
<div id="dd" class="wrapper-dropdown-5" tabindex="1">BOOK NOW
<ul class="dropdown">
<li>Booking.com</li>
<li>Airbnb</li>
<li>Trip Advisor</li>
</ul>
</div>
https://jsfiddle.net/2pdgc537/6/
-----Edit-------------------------
I don’t need bring down the drop down I need some thing like this https://s27.postimg.org/pqna239sj/sampel.png
You need to change the top position of .wrapper-dropdown-5 .dropdown i.e.,
.wrapper-dropdown-5 .dropdown
{
top : 66%;
}
Here is the working snippet
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents: function() {
var obj = this;
obj.dd.on('click', function(event) {
$(this).toggleClass('active');
event.stopPropagation();
});
}
}
$(function() {
var dd = new DropDown($('#dd'));
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-5').removeClass('active');
});
});
/* DEMO 5 */
.wrapper-dropdown-5 {
/* Size & position */
position: relative;
width: 200px;
margin: 0 auto;
padding: 12px 15px;
z-index: 10;
/* Styles */
background: #63731b;
border-radius: 50px;
border: 5px solid transparent;
border-color: #ffffff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
color: white;
font-weight: 600;
cursor: pointer;
outline: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.wrapper-dropdown-5:after {
/* Little arrow */
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
right: 15px;
margin-top: -3px;
border-width: 6px 6px 0px 6px;
border-style: solid;
border-color: #000000 transparent;
}
.wrapper-dropdown-5 .dropdown {
/* Size & position */
position: absolute;
top: 66%;
left: 0;
right: 0;
z-index: 5;
/* Styles */
background: #63731b;
border-radius: 0 0 5px 5px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: none;
border-bottom: none;
list-style: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
/* Hiding */
max-height: 0;
overflow: hidden;
}
.wrapper-dropdown-5 .dropdown li {
padding: 0 10px;
}
.wrapper-dropdown-5 .dropdown li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 10px 0;
transition: all 0.3s ease-out;
/*border-bottom: 1px solid #e6e8ea;*/
}
.wrapper-dropdown-5 .dropdown li:last-of-type a {
border: none;
}
.wrapper-dropdown-5 .dropdown li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;
}
/* Hover state */
.wrapper-dropdown-5 .dropdown li:hover a {
color: #57a9d9;
}
/* Active state */
.wrapper-dropdown-5.active {
border-radius: 40px;
background: #E7B300;
box-shadow: none;
/*border-bottom: none;*/
color: white;
z-index: 10;
}
.wrapper-dropdown-5.active:after {
border-color: #82d1ff transparent;
}
.wrapper-dropdown-5.active .dropdown {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
max-height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4 h-center">
<br/>
<div id="dd" class="wrapper-dropdown-5" tabindex="1">BOOK NOW
<ul class="dropdown">
<li>Booking.com</li>
<li>Airbnb</li>
<li>Trip Advisor</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Add this line in css .dropdown{margin-top:15%;}. Fiddle link is : https://jsfiddle.net/6zw6j97b/
Just edit your css like bolow.
.wrapper-dropdown-5 .dropdown {
/* Size & position */
position: absolute;
top: 80%;
display: block;
left: 0;
right: 0;
z-index: 5;
/* Styles */
background: #63731b;
border-radius: 0 0 5px 5px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: none;
border-bottom: none;
list-style: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
/* Hiding */
max-height: 0;
overflow: hidden;
}``
Here is my code:
#mainwrapper {
font: 10pt normal Arial, sans-serif;
height: auto;
margin: 80px auto 0 auto;
text-align: center;
width: 1000px;
}
/* Image Box Style */
#mainwrapper .box {
border: 2px solid #fff;
cursor: pointer;
height: 200px;
float: left;
margin: 0 auto;
position: relative;
overflow: hidden;
width: 400px;
background-size: cover;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
width: 100%;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
#mainwrapper .box .caption {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
/** Caption 1: Simple **/
#mainwrapper .box .simple-caption {
height: 30px;
width: 200px;
display: block;
bottom: -30px;
line-height: 10pt;
text-align: center;
}
/** Simple Caption :hover Behaviour **/
#mainwrapper .box:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
opacity: 1;
transform: translateY(-100%);
}
<div id="mainwrapper">
<!-- Image Caption 1 -->
<div id="box-1" class="box">
<img id="image-1" src="http://www.sideshowtoy.com/wp-content/uploads/2016/01/marvel-deadpool-sixth-scale-hot-toys-feature-902628.jpg" />
<span class="caption simple-caption">
<p>Pool</p>
</span>
</div>
</div>
What I want to do is to set background image inside parent div to stretch.
I have tried in #mainwrapper .box img like
position:absolute;
margin: auto;
max-width: 100%;
max-height: 100%;
But it doesn't work .
Fiddle Example
a few things:
you can't have p tag inside span
use max-width:100% in your img (or width:100% if the image is smaller than the container)
use max-width over width in your #mainwrapper to avoid scrollbars, with that the container will be "resizable", so easier to work for responsive
remove background:cover, because you don't have a background at all
UPDATE
added object-fit per OP request in comment.
#mainwrapper {
font: 10pt normal Arial, sans-serif;
height: auto;
margin: 80px auto 0;
text-align: center;
max-width: 1000px;
}
/* Image Box Style */
#mainwrapper .box {
border: 2px solid #fff;
cursor: pointer;
height: 200px;
margin: 0 auto;
position: relative;
overflow: hidden;
width: 400px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
object-fit: cover;
height: 100%;
width: 100%
}
#mainwrapper .box .caption {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
/** Caption 1: Simple **/
#mainwrapper .box .simple-caption {
height: 30px;
width: 100%;
display: block;
bottom: -30px;
line-height: 10pt;
text-align: center;
}
/** Simple Caption :hover Behaviour **/
#mainwrapper .box:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
opacity: 1;
transform: translateY(-100%);
}
<div id="mainwrapper">
<!-- Image Caption 1 -->
<div id="box-1" class="box">
<img id="image-1" src="http://www.sideshowtoy.com/wp-content/uploads/2016/01/marvel-deadpool-sixth-scale-hot-toys-feature-902628.jpg" />
<span class="caption simple-caption">Pool</span>
</div>
<hr />
<div id="box-2" class="box">
<img id="image-2" src="//lorempixel.com/100/400" />
<span class="caption simple-caption">Pool</span>
</div>
</div>
Just set the image's width to 100%
#mainwrapper .box img {
width: 100%;
}
Fiddle
or add the background-image in css for the div.
.box {
background-image: url("http://www.sideshowtoy.com/wp-content/uploads/2016/01/marvel-deadpool-sixth-scale-hot-toys-feature-902628.jpg");
background-size:cover;
}
remove the <img> tag in your HTML if you choose this route.
i have a slide in over an image as you can see here
http://jsfiddle.net/xt94eah2/4/
when you hover over the example image you get a caption. But, how do i put a link in it?
So only when you hover and you see the grey part with says with some more info that you can then click the image and it goes to a link for example w3schools.
i have the code here
<div class="image revealUpFull">
<img src="http://cssdeck.com/uploads/media/items/8/8NNM3Tc.png" width="150px" height="150px" />
<span class="title">Caption <br / ><br / > with some more info</span>
</div>
</div>
and the CSS
div.container {
margin: 50px auto;
width: 675px;
}
div.image {
position: relative;
overflow: hidden;
width: 260px;
height: 195px;
display: inline-block;
margin-right: 15px;
margin-bottom: 15px;
box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.3);
}
img {
position: absolute;
left: 0;
top: 0;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
span.title {
width: 260px;
height: 20px;
position: absolute;
background: rgba(30,30,30,0.9);
text-align: center;
padding: 5px 0 4px;
font-size: 14px;
color: white;
font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
div.image.revealUpFull span {
height: 195px;
width: 260px;
bottom: -150px;
}
div.image.revealUpFull:hover img {
top: -150px;
}
div.image.revealUpFull:hover span {
bottom: 0px;
}
This is what you can do if I got it right for your question (You would like the whole slide in area to be clickable?). So you can make both span and a with full width and height of the area.
DEMO: http://jsfiddle.net/xt94eah2/7/
div.image.revealUpFull span {
height: 141px;
width: 150px;
bottom: -120px;
display: block;
}
div.image.revealUpFull span a {
display: block;
height: 100%;
width: 100%;
color: white;
}
There are a few corrections for the markup.
The last </div> is mis-matched.
The inline <img src="" width="150px" height="150px" /> is wrong, it should be width="150" height="150" without px.
This is my code for creating a drop down menu. Here i have give the link to the drop down. This code work very well. I just don't know how to link those drop downs.
html code
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="pine3.css" type="text/css">
</head>
<body>
<div class="outline">
<header>
<h1><h1 style="font-family:verdana"><img src="Red_Pine_-_mature.jpg" width="104" height="142">Pine Server</h1>
</header>
<p></p>
<p></p>
<nav>
<li><b>Home</b></li>
<div id="container">
<div id="button"><span>Main Release</span>
<a class="first-hover" href="#"></a>
<ul class="menu">
<li>Application</li>
<li>DataBase Installer</li>
<li>CSF</li>
</ul>
<div class="button-hover"></div>
</div>
</div>
<div id="container">
<div id="button"><span>Hotfix</span>
<a class="first-hover" href="#"></a>
<ul class="menu">
<li>Application</li>
<li>DataBase Installer</li>
<li>CSF</li>
</ul>
<div class="button-hover"></div>
</div>
</div>
<div id="container">
<div id="button"><span>CSF</span>
<a class="first-hover" href="#"></a>
<ul class="menu">
<li>Application</li>
<li>DataBase Installer</li>
<li>CSF</li>
</ul>
<div class="button-hover"></div>
</div>
</div>
</nav>
<section>
<h1>Pine Server</h1>
<p>
</p>
<p>
</section>
<footer>
Copyright © digite.com
</footer>
</body>
css code
div.outline {
width: 96%;
float: left;
padding: 1% 2%;
margin: 1% 0;
border-radius: 15px;
background: Maroon;
box-shadow: 15px 15px 20px #202020;
height: 750px
}
header {
background-color:black;
color:white;
text-align:center;
padding:10px;
}
nav {
line-height:20px;
background-color:#808080;
height:400px;
width:200px;
float:left;
padding:5px;
}
main {
width:90%;
background: #aaaaaa;
float: left;
margin: 1% 0;
border-radius: 10px;
box-shadow: 5px 5px 10px #808080
}
body{
margin: 0;
padding: 0;
}
a{
float: center;
text-decoration: none;
color: white;
line-height: 30px;
display: block;
font-family: 'Arial', Verdana, arial;
}
#container{
height: 50px;
width: 90%;
padding-top: 50px;
}
#container:hover .first-hover, #container:hover .button-hover{
-webkit-transition-delay:0.5s;
-moz-transition-delay:0.5s;
-o-transition-delay:0.5s;
-ms-transition-delay:0.5s;
}
#button{
margin: 0 auto;
width: 150px;
height: 30px;
text-align: center;
background-image: -webkit-linear-gradient(#5a5a5a, #393939);
background-image: -moz-linear-gradient(#5a5a5a, #393939);
background-image: -o-linear-gradient(#5a5a5a, #393939);
background-image: -ms-linear-gradient(#5a5a5a, #393939);
background-image: linear-gradient(#5a5a5a, #393939);
border-radius: 5px 0px 0px 3px;
border-right: 1px solid #d6d6d6;
position: relative;
}
#button:hover .button-hover{
-webkit-transition-delay:0s;
-moz-transition-delay:0s;
-o-transition-delay:0s;
-ms-transition-delay:0s;
}
#button span{
color: white;
text-decoration: none;
line-height: 30px;
font-family: 'Arial', Verdana, arial;
}
.button-hover{
content:"";
position: fixed;
left: 123px;
top: -29px;
width: 20px;
height: 25px;
border-radius:0 3px 3px 0;
border-left: 1px solid #242424;
background-image: -webkit-linear-gradient(#5a5a5a, #393939);
background-image: -moz-linear-gradient(#5a5a5a, #393939);
background-image: -o-linear-gradient(#5a5a5a, #393939);
background-image: -ms-linear-gradient(#5a5a5a, #393939);
background-image: linear-gradient(#5a5a5a, #393939);
-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;
}
#button span:after , .button-hover span:after, .first-hover:before{
background: rgba(255,255,255,.07);
content: "";
height: 35px;
left: 0;
position: absolute;
width: 100%;
}
.button-hover:after{
content:"";
width: 5px;
height: 15px;
border-width: 4px;
border-style: solid;
border-color: white transparent;
left: 6px;
top: 0;
position: absolute;
}
.menu{
visibility: hidden;
position: absolute;
top: 25px;
left: 151px;
height: 0;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
background-color: #393939;
border-left: 1px solid #242424;
border-right: 1px solid #242424;
-webkit-transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.first-hover{
position: absolute;
visibility:hidden;
top:0;
left: 151px;
width: 0;
height: 30px;
margin: 0;
padding: 0;
background-color: #393939;
border-left: 1px solid #242424;
border-right: 1px solid #242424;
background-image: -webkit-linear-gradient(#5a5a5a, #393939);
background-image: -moz-linear-gradient(#5a5a5a, #393939);
background-image: -o-linear-gradient(#5a5a5a, #393939);
background-image: -ms-linear-gradient(#5a5a5a, #393939);
background-image: linear-gradient(#5a5a5a, #393939);
-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;
}
.first-hover a{
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;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#button:hover .first-hover{
width: 150px;
visibility:visible;
-webkit-transition-delay:0s;
-moz-transition-delay:0s;
-o-transition-delay:0s;
-ms-transition-delay:0s;
}
#button:hover .menu{
visibility: visible;
height: 103px;
-webkit-transition-delay:0.1s;
-moz-transition-delay:0.1s;
-o-transition-delay:0.1s;
-ms-transition-delay:0.1s;
}
#button:hover .menu li{
border-bottom: 1px solid #676767;
-webkit-transition-delay:0.3s;
-moz-transition-delay:0.3s;
-o-transition-delay:0.3s;
-ms-transition-delay:0.3s;
}
.menu li{
list-style: none;
height: 25px;
border-bottom:none;
text-align: center;
-webkit-transition: border-bottom 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition: border-bottom 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition: border-bottom 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition: border-bottom 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: border-bottom 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.menu li:hover{
background-color: rgba(255,255,255,.07);
}
#button:hover .menu li:first-child{
width: 140px;
}
main {
width:100%;
background: #ffffff;
float: left;
margin: 1% 0;
border-radius: 10px;
box-shadow: 5px 5px 10px #202020
}
main h1 {
font-size : 20px;
text-align : center;
color : #003399;
margin: 2% 0 }
main p {
text-align : left;
text-indent : 16px ;
margin: 2% 10% }
main img {
margin: 4% 4%;
border-radius: 5px;
border: solid #000000 1px;
box-shadow: 4px 4px 8px #202020
}
main img {
max-width: 100%
}
section {
background: steelblue;
height:360px;
width:750px;
float:left;
text-align:left;
padding:50x;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:15px;
}