I'm working on an image grid and want to create an effect similar to this http://instagram.com/instagram/ (the images in the squares on the lower part of the page where the border expands. This is what I have so far:
HTML:
<div id="page-title"> </div>
<div id="wrapper" style="min-height:300px;">
<!--start: Container -->
<div class="container" style="margin-left:100px;">
<div style="position: absolute; width:200px; border: 1px solid black; height:200px;">
<div style="position: relative; background:url('/testimages/1354189822.jpg')" class="polaroids">
</div>
</div>
</div>
</div>
</div>
CSS:
.polaroids {
background: #fff;
float: left;
width: 158px;
height:158px;
padding: 5px 5px 5px;
text-align: center;
text-decoration: none;
color: #333;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-webkit-transition: all .2s ease-in-out;
border: 4px solid white;
background-color: black;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin:0 auto !important;
}
.polaroids:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
z-index: 5; border-top: 10px solid white;
border-bottom: 10px solid white;
border-left: 8px solid white;
border-right: 8px solid white;
}
The middle div does not seem to want to centre. Where am I going wrong? http://jsfiddle.net/b5XDK/
for horizontal center use margin:0 auto; on the child element and remove the float:left;
http://jsfiddle.net/roine/b5XDK/10/
remove this
.polaroids { float:left }
remove your float:left of .polaroids
Related
I want to make a background image to be seen over div. Anything that I've tried with z-index didn't helped me. Image itself has not standard shape and glowing border. As image ends ideally "logo2" should imitate that "glowing" by box-shadow parameter. But anything I've tried "logo2" always over "logo" crosses the image. This is how I want it to be like site.com/logo2.png
.logo {
background: url(site.com/logo.png) no-repeat;
height: 200px;
z-index:100;
position:relative;
}
.logo2 {
width: 100%;
height: 50px;
background-color: #000;
padding: 10px 0px 10px 0px;
border-radius: 10px;
border: 1px solid #7b0000;
box-shadow: 0px 0px 2px 2px #d09d00;
position:relative;
z-index:10;
<div class="logo">
<div class="logo2"></div>
</div>
I guess this is what you want. You can adjust width of .logo2 accordingly
.logo {
background: url(http://homeworld.su/logo.png) no-repeat;
height: 200px;
z-index:100;
position:relative;
}
.logo2 {
width: 20%;
height: 40px;
background-color: #000;
padding: 10px 0px 10px 0px;
border-radius: 10px;
border: 1px solid #7b0000;
box-shadow: 0px 0px 2px 2px #d09d00;
position:absolute;
top:10px;
left:495px;
<div class="logo">
<div class="logo2"></div>
</div>
Is it possible to add an even shadow to a div that is not a regular rectangle? Adding box-shadow doesn't work the way it works with a normal div. This is the div I'm talking about:
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
yes you can. Here is the example:
.circle {
width:150px;
height:150px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px rgba(0,0,0,0.6);
border-radius:100px;
}
<div class="circle">
</div>
I have a contact us page with several divs that act as containers and inside these containers are more divs that hold the content. Here is the structure of the page :
<div class="divBlock">
<div class="spacer10"></div>
<div class="centerDiv">
<div>
<div class="divContactImg">
<div class="branchHeader">Durban</div>
<div class="branchText">89 Joe Slovo Street</div>
<div class="branchText">Durban</div>
</div>
<div class="divContactImg">
<div class="branchHeader">Hillbrow</div>
<div class="branchText">Point Building</div>
<div class="branchText"> StreetG</div>
<div class="branchText">Hillbrow</div>
</div>
<div class="divContactImg">
<div class="branchHeader">Pinetown</div>
<div class="branchText">56 Hill Street</div>
<div class="branchText">Pinetown</div>
</div>
</div>
</div>
</div>
</div>
<div class="spacer10"></div>
</div>
The problem is these divs (divContactImg) are overlapping their container div (divBlock). Here is the CSS:
.centerDiv { text-align : center; max-width : 100%; height : auto; margin: 0px auto 0px auto; display: block ; }
.divContactImg {
background-image: url('Images/Contacts_Branches_BG.png');
width:220px;
height:74px;
border-left: thin solid #333;
border-top: thin solid #333;
border-right: thin solid maroon;
border-bottom: thin solid maroon;
float:left;
text-align:left;
margin-left: 10px;
margin-top: 1px;
border-radius:5px;
}
.branchHeader {
font-size: 24px;
font-family:Arial Narrow;
margin-left: 10px;
margin-top: 5px;
text-transform:uppercase;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 00 #000;
}
.branchText {
font-size: 12px;
color:#b0b0b0;
margin-left: 10px;
text-transform:uppercase;
}
.branchHeaderOpening {
font-size: 24px;
font-family:Arial Narrow;
margin-left: 10px;
margin-top: 5px;
text-transform:uppercase;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 00 #000;
text-align:center;
}
.divBlock { border-left: thin solid #333; border-right: thin solid #333; border-bottom: thin solid #333; border-radius: 0px 0px 8px 8px;
margin: 0px 10px 0px 10px; background: #000000;}
I have tried setting clear:both on the container divs but no luck. If I take out the float:left then the center div stretches so the children div's fill it, however I need these divs to be displayed three across and this makes them display one per line.
I replaced
.divContactImg {
background-image: url('Images/Contacts_Branches_BG.png');
width:220px;
height:74px;
border-left: thin solid #333;
border-top: thin solid #333;
border-right: thin solid maroon;
border-bottom: thin solid maroon;
/*float:left;*/
display:inline-block; **/**ADD**/**
vertical-align:top; **/**ADD**/**
text-align:left;
margin-left: 10px;
margin-top: 1px;
border-radius:5px;
}
I have added an overlay of shadow on my images but I want the shadow to get darker when I hover the image. I tried a bunch of different things but I couldn't get it to work properly and it would shift the pictures all over the place when you would hover. This is what I have so far.
http://jsfiddle.net/Qf4Ka/6/
HTML
<section id="top-container" class="top-column" style="width:1050px; height:400px; ">
<div class="image" style="float:left;">
<img src="http://www.hdwallpapersinn.com/wp-content/uploads/2012/09/HD-Wallpaper-1920x1080.jpg" border="0"; width="263"; height="200" style="display: block; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd;">
<h4 style="font-size:30px; top: 90px; ">Nature</h4>
</div>
<div class="image" style="float:left;">
<img src="http://www.hdwallpapersart.com/wp-content/uploads/2013/04/tiger_wallpapers_hd_Bengal_Tiger_hd_wallpaper1.jpg" border="0"; width="262"; height="200" style="display: block; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; ">
<h4 style="font-size:30px; top: 90px;">Bengal Tiger</h4>
</div>
</section>
CSS
.image {
position: relative;
}
h4 {
position: absolute;
width: 100%;
color: #fff;
float: left;
position: absolute;
font-size: 40px;
font-family: "Oswald";
text-align: center;
max-height: auto;
z-index: 20;
text-shadow: 1px 1px 2px #000;
-moz-text-shadow: 1px 1px 2px #000;
-ms-text-shadow: 1px 1px 2px #000;
-o-text-shadow: 1px 1px 2px #000;
-webkit-text-shadow: 1px 1px 2px #000;
}
.image {
position: relative;
}
.image:before {
content: '';
box-shadow: 0 0 50px 4px #000 inset;
-moz-box-shadow: 0 0 50px 4px #000 inset;
-webkit-box-shadow: 0 0 50px 6px #000 inset;
float: left;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 20;
cursor: pointer;
}
Add a transition to the :before pseudo element.
.image:before {
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition:all 1s;
}
Change the pseudo element's box-shadow on hover of the .image element.
.image:hover:before {
box-shadow:0 0 100px 30px #000 inset;
}
Here is the updated example.
I have a few nested div blocks and my problem is that the last one left_navigation_container doesn't have a 7px spacing at the bottom margin and I'm not sure why (jsfiddle).
HTML:
<div class="left_navigation_outer">
<div class="left_navigation_header_outer">
<div class="left_navigation_header_logo">
<strong>Title</strong>
</div>
</div>
<div class="left_navigation_container">
</div>
</div>
CSS:
div.left_navigation_outer {
background: green;
background-repeat: repeat;
margin:10px;
-moz-box-shadow: 0px 0px 5px #ababab;
-webkit-box-shadow: 0px 0px 5px #ababab;
box-shadow: 0px 0px 5px #ababab;
}
div.left_navigation_header_outer {
background: blue;
background-repeat: repeat;
height: 50px;
border-top: 4px solid black;
}
div.left_navigation_header_logo {
line-height:50px;
color: #efefef;
text-shadow: 0 -1px #000;
text-align: center;
text-transform: uppercase;
}
div.left_navigation_container {
background: red;
background-repeat: repeat;
height: 50px;
margin: 7px;
}
Your problem is caused by the way of calculating margin for this element - it refers to the its siblings', not parent's position.
You can set margin for other div containing "TITLE" text and see same issue with margin-top.
EDIT: You can add <div style="width: 100%; height: 1px;"></div> after <div class="left_navigation_container"></div> to trigger bottom margin and make it visible.
You can fix that by giving div.left_navigation_outer a padding-bottom
Weird... not sure why but if you add a padding-bottom 1px to div.left_navigation_outer it fixes it - here's my fork of your fiddle
div.left_navigation_outer {
background: green;
background-repeat: repeat;
margin:10px;
-moz-box-shadow: 0px 0px 5px #ababab;
-webkit-box-shadow: 0px 0px 5px #ababab;
box-shadow: 0px 0px 5px #ababab;
padding-bottom:1px; /* tricky hack to get the bottom spacing */
}