CSS - Add space between elements except the last one - html

On this jsfiddle you can see that I have 6 circles: 3 on the first row and 3 on the second row.
I'd like to add some space between them and was planning to use margin-right: 5px. The issue if I do this is that the last elements (circle 3 and circle 6) will also have this extra 5px to their right which I don't want (since there's no elements next to them). Is there a workaround to that?
What I need is:
(Circle 1) 5px space (Circle 2) 5px space (Circle 3)
Thanks
HTML:
<div class="circle circlebackground">
<p>Circle 1</p>
<div class="innercircle">
<p>by Angela</p>
</div>
</div>
<div class="circle circlebackground">
<p>Circle 2</p>
<div class="innercircle">
<p>by Angela</p>
</div>
</div>
<div class="circle circlebackground">
<p>Circle 3</p>
<div class="innercircle">
<p>by Angela</p>
</div>
</div>
<div class="circle circlebackground clear">
<p>Circle 4</p>
<div class="innercircle">
<p>by Angela</p>
</div>
</div>
<div class="circle circlebackground">
<p>Circle 5</p>
<div class="innercircle">
<p>by Angela</p>
</div>
</div>
<div class="circle circlebackground">
<p>Circle 6</p>
<div class="innercircle">
<p>by Angela</p>
</div>
</div>
CSS:
.circle {
float: left;
margin-bottom: 10px;
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.circlebackground {
background: #fff;
border:1px solid #37629B;
}
.innercircle {
position: absolute;
background: red;
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.circle p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
margin: 0;
}
.innercircle p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
margin: 0;
opacity: 1;
-webkit-transition: all 1s ease-in-out 0.4s;
-moz-transition: all 1s ease-in-out 0.4s;
-o-transition: all 1s ease-in-out 0.4s;
-ms-transition: all 1s ease-in-out 0.4s;
transition: all 1s ease-in-out 0.4s;
}
.circle:hover {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.circle:hover .innercircle {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.circle:hover .innercircle p {
opacity: 1;
}
.clear {
clear: both;
}

You can use this type of css if you really want to give margin-right.
.circle {
float: left;
margin-bottom: 10px;
width: 200px;
height: 200px;
border-radius: 50%;
margin-left:5px; /*added*/
position: relative;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.circle:nth-of-type(3n+0) {
margin-right:0px;
}
jsfiddle link

Make a class with margin-right: 5px and that add you in the circle where you want.
Here the JSfiddle
.circle_5px_marging {
margin-right: 5px;
}

add another class for your last div and there mention margin-right:0;
MARK-UP::
<div class="all_circles">
</div>
<div class="all_circles">
</div>
<div class="all_circles last_circle">
</div>
CSS::
.all_circles{
margin-right:5px;
}
.last_circle{
margin-right:0;
}
now in this example .all_circles is aplied to every div which have margin-right:5px; and change it for the last div by adding an extra class where margin-right:0;
note:: in this case the additional style, i.e. .last_circle must be defined after defining .all_circles because here .last_circle will override the margin property
of .all_circles

Related

Text gets blur when using translate property in css

I have one section which has an image & some text.
What I want is to hover over a div and it should show little rise animation effect on the div itself.
It's working, but while the animation is playing, I've noticed that the text gets a little size change.
.box-cards {
width: 100%;
padding: 10px 10px 30px 10px;
min-height:140px;
margin-bottom:20px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
img{width:300px; height:200px;}
.box-cards:hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all .3s ease;
transition: all .3s ease;
overflow: hidden;
}
<div class="box-cards">
<div class="box-image">
<img src="https://cdn-images-1.medium.com/max/660/1*WgROsTKa6diRYTG5K0R5mw.jpeg" class="img-responsive post-image" />
</div>
<div class="box-content">
<h3>Hello there</h3>
</div>
</div>
add hover styles to box-image instead of box-cards, check below
Styles
.box-cards {
width: 100%;
padding: 10px 10px 30px 10px;
min-height:140px;
margin-bottom:20px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
img{width:300px; height:200px;}
.box-image:hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all .3s ease;
transition: all .3s ease;
overflow: hidden;
}
Dom
<div class="box-cards">
<div class="box-image">
<img src="https://cdn-images-1.medium.com/max/660/1*WgROsTKa6diRYTG5K0R5mw.jpeg" class="img-responsive post-image" />
</div>
<div class="box-content">
<h3>Hello there</h3>
</div>
</div>
try this
use .box-image instead of .box-card:hover
.box-cards {
width: 100%;
padding: 10px 10px 30px 10px;
min-height: 140px;
margin-bottom: 20px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
img {
width: 300px;
height: 200px;
}
.box-image:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all .3s ease;
transition: all .3s ease;
overflow: hidden;
}
<div class="box-cards">
<div class="box-image">
<img src="https://cdn-images-1.medium.com/max/660/1*WgROsTKa6diRYTG5K0R5mw.jpeg" class="img-responsive post-image" />
</div>
<div class="box-content">
<h3>Hello there</h3>
</div>
</div>
You have to change .box-cards img:hover instead of .box-cards:hover
.box-cards {
width: 100%;
padding: 10px 10px 30px 10px;
min-height:140px;
margin-bottom:20px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
img{width:300px; height:200px;}
.box-cards img:hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all .3s ease;
transition: all .3s ease;
overflow: hidden;
}
<div class="box-cards">
<div class="box-image">
<img src="https://cdn-images-1.medium.com/max/660/1*WgROsTKa6diRYTG5K0R5mw.jpeg" class="img-responsive post-image" />
</div>
<div class="box-content">
<h3>Hello there</h3>
</div>
</div>

Transition without moving background (CSS and HTML)

I'm still new in coding, so you'll see some unnecessary codes in the css..
My problem is, I want to make the background stays/static when hovered, I believe my hover style is called "slide".. But when I hover on, the background did hover too. So, I need a help on how to make the background static when hovered.
p/s: please remain the margin for avpb :)
CSS:
#avpb {
background: rgba(0, 0, 0, 0.6);
width: 160px;
height: 220px;
border: 1px solid #000000;
padding: 19.5px;
margin-top: -10px;
margin-left: 555px;
position: absolute;
}
#avp {
position: absolute;
width: 160px;
height: 220px;
}
#avp img {
position: absolute;
z-index: 0;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
opacity: 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;
}
#avp:hover > .overlay {
opacity: 1;
width: 160px;
height: 220px
height:auto;
background: rgba(0, 0, 0, 0.6);
-webkit-transform:translate(0px,10px);
-moz-transform:translate(0px,10px);
-ms-transform:translate(0px,10px);
-o-transform:translate(0px,10px);
transform:translate(0px,10px);
}
.button {
width: 160px;
height: 220px;
position: absolute;
}
.button a {
font-family: Lato;
font-size: 10px;
letter-spacing: 1px;
width: 80px;
height: 25px;
line-height: 25px;
margin-left: auto;
margin-right: auto;
background: rgba(0, 0, 0, 0.6);
border: 1px solid #000000;
text-align: center;
text-decoration: none;
padding: 5px;
color: #ffffff !important;
display: block;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
-ms-transition: 0.5s ease;
}
.button a:hover {
background: rgba(0, 0, 0, 0.6);
border: 1px solid #4cd1db;
color: #4cd1db !important;
text-decoration: none;
letter-spacing: 2px;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
-ms-transition: 0.5s ease;
}
HTML:
<div id="avpb">
<div id="avp">
<img src="http://www.imvu.com/catalog/web_av_pic.php?u=87116145">
<div class="overlay">
<div class="button">
<br>
<br>
add
<br>
message
</div>
</div>
</div>
</div>
Here's a JSFiddle
You should just let the .button transform then. I added some styles to your css file, hard to explain, just try and compare it with your original code :).
#avpb {
background: rgba(0, 0, 0, 0.6);
width: 160px;
height: 220px;
border: 1px solid #000000;
padding: 19.5px;
margin-top: -10px;
margin-left: 555px;
position: absolute;
}
#avp {
position: absolute;
width: 160px;
height: 220px;
}
#avp img {
position: absolute;
z-index: 0;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
opacity: 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;
}
.button{
-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;
}
#avp:hover>.overlay {
opacity: 1;
width: 160px;
height: 220px height:auto;
background: rgba(0, 0, 0, 0.6);
}
#avp:hover>.overlay>.button {
opacity: 1;
width: 160px;
height: 220px height:auto;
-webkit-transform: translate(0px, 10px);
-moz-transform: translate(0px, 10px);
-ms-transform: translate(0px, 10px);
-o-transform: translate(0px, 10px);
transform: translate(0px, 10px);
}
.button {
width: 160px;
height: 220px;
position: absolute;
}
.button a {
font-family: Lato;
font-size: 10px;
letter-spacing: 1px;
width: 80px;
height: 25px;
line-height: 25px;
margin-left: auto;
margin-right: auto;
background: rgba(0, 0, 0, 0.6);
border: 1px solid #000000;
text-align: center;
text-decoration: none;
padding: 5px;
color: #ffffff !important;
display: block;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
-ms-transition: 0.5s ease;
}
.button a:hover {
background: rgba(0, 0, 0, 0.6);
border: 1px solid #4cd1db;
color: #4cd1db !important;
text-decoration: none;
letter-spacing: 2px;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
-ms-transition: 0.5s ease;
}
<div id="avpb">
<div id="avp">
<img src="http://www.imvu.com/catalog/web_av_pic.php?u=87116145">
<div class="overlay">
<div class="button">
<br>
<br>
add
<br>
message
</div>
</div>
</div>
</div>
You are transforming/translating the div to be 10 pixels down:
-webkit-transform:translate(0px,10px);
-moz-transform:translate(0px,10px);
-ms-transform:translate(0px,10px);
-o-transform:translate(0px,10px);
transform:translate(0px,10px);
Delete these and it should work fine.

Effect image on hover with css

I am trying to animated an image on hover. The result i want to have is similar to this one : See here ( scroll to see the image "Our Team" )
So, I want to have a background where i could display some information ( name, links) exactly like in this theme but I can't achieve it.
Here is my code :
<div class="row">
<div class="col-md-6">
<div class="picture">
<div class="photoapropos center-block">
<div class="info">
<img class="img-responsive img-circle" alt="Name" src="<?= $url; ?>"/>
<p>Name</p>
</div>
</div>
</div>
</div>
</div>
And my CSS :
.picture {
display: block;
opacity: 1;
}
.photoapropos{
display: block;
position: relative;
width: 425px;
height: 425px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.photoapropos:hover .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.photoapropos .info {
position: absolute;
background: #FF8C00;
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
Can anyone help me because this feature seemed easy to realise but I don't see what i am missing ?
Thanks.
.picture {
display: block;
opacity: 1;
background:url('http://themes.startbootstrap.com/spectrum-v1.2.0/assets/img/demo-portraits/portrait-4.jpg');
border-radius: 50%;
height: 425px;
width: 425px;
}
.photoapropos{
display: block;
position: relative;
width: 425px;
height: 425px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.photoapropos:hover .info{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.photoapropos .info {
position: absolute;
/*background: #FF8C00;*/
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
text-align: center;
background: rgba(82, 219, 235, 0.8);
color: #fff;
}
.photoapropos .info p {
margin-top: 50px;
}
<div class="row">
<div class="col-md-6">
<a class="picture" href="<?= $url; ?>">
<div class="photoapropos center-block">
<div class="info">
<p>Name</p>
</div>
</div>
</a>
</div>
</div>
You need to learn how to copy code. Haha!
Please change classes and other things. You can give credit to that site too.
The effect is coming from CSS scale.
.item {
width: 225px;
height: 225px;
margin: 15px auto;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 15px rgba(244, 245, 247, 0.5);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.item .info {
position: absolute;
background: rgba(82, 219, 235, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 1;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.about-img-1 {
background-image: url(https://www.gravatar.com/avatar/f44f4e56cd6b6a152f0dcfc8412b7069?s=328&d=identicon&r=PG);
}
.visible-xs {
display: none!important;
}
.img-circle {
border-radius: 50%;
}
.item .info h3 {
color: #f4f5f7;
font-size: 24px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 120px;
}
.item .info p {
color: #f4f5f7;
color: rgba(244, 245, 247, 0.8);
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 14px;
border-top: 1px solid rgba(244, 245, 247, 0.5);
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0.4s;
-moz-transition: all 0.4s ease-in-out 0.4s;
-o-transition: all 0.4s ease-in-out 0.4s;
-ms-transition: all 0.4s ease-in-out 0.4s;
transition: all 0.4s ease-in-out 0.4s;
}
.item .info .list-inline {
font-size: 18px;
}
.item .info ul {
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0.4s;
-moz-transition: all 0.4s ease-in-out 0.4s;
-o-transition: all 0.4s ease-in-out 0.4s;
-ms-transition: all 0.4s ease-in-out 0.4s;
transition: all 0.4s ease-in-out 0.4s;
}
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.item:hover {
box-shadow: none;
}
.item:hover .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.item:hover .info ul {
opacity: 1;
}
<div class="item about-img-1">
<div class="info">
<!-- Mobile Fallback Image -->
<img class="img-responsive img-circle visible-xs" src="https://www.gravatar.com/avatar/f44f4e56cd6b6a152f0dcfc8412b7069?s=328&d=identicon&r=PG" alt="">
<!-- Name / Position / Social Links -->
<h3>Kalpesh Singh</h3>
<p>KnowKalpesh.in</p>
<ul class="list-inline">
<li><a class="light-text" href="#"><i class="fa fa-facebook fa-fw"></i></a>
</li>
<li><a class="light-text" href="#"><i class="fa fa-linkedin fa-fw"></i></a>
</li>
<li><a class="light-text" href="#"><i class="fa fa-twitter fa-fw"></i></a>
</li>
</ul>
</div>
</div>
The hover part use box-shadow and scale transform property with CSS transitions.
Here's the result with the website example code and the relevant CSS part.
.item {
width: 225px;
height: 225px;
margin: 15px auto;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 15px rgba(244, 245, 247, 0.5);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.item {
margin: 30px;
}
.about-img-1 {
background-image: url(http://themes.startbootstrap.com/spectrum-v1.2.0/assets/img/demo-portraits/portrait-1.jpg);
}
.img-circle {
border-radius: 50%;
}
.item>a>img, .item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
display: block;
max-width: 100%;
height: auto;
}
img {
-webkit-backface-visibility: hidden;
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
.item .info h3 {
color: #f4f5f7;
font-size: 24px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 120px;
}
.item .info {
position: absolute;
background: rgba(82, 219, 235, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.item:hover .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.item:hover {
box-shadow: none;
}
Fiddle
Here is an answer for you in Fiddle: https://jsfiddle.net/uhdtv3nv/
.wrapper {
width: 100%;
height: 100%;
background-color: blue;
}
.item {
width: 225px;
height: 225px;
margin: 15px auto;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 15px rgba(244, 245, 247, 0.5);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-image: url('http://iconshow.me/media/images/ui/ios7-icons/png/512/person_1.png');
}
.item:hover {
box-shadow: none;
}
.item:hover .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.info {
position: absolute;
background: rgba(82, 219, 235, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.item h3 {
padding: 80px 70px;
}
<div class="wrapper">
<div class="item about-img-1">
<div class="info">
<h3>Some text</h3>
</div>
</div>
</div>

Align Icons on center of a picture

I'm trying to build a tumblr theme from scratch (http://themeexp1.tumblr.com/) and I'm having sobre trouble on aligning the Like, Reblog and Notes icons on the center(vertically and horizontally) of the image when you hover it.
I've tried many different ways but none of them seems to be working.
The icons and the image are inside a container.
CSS
.container, .container img{
width: 350px;
float: left;
}
.container{
margin-bottom: 14px;
}
.container img{
outline: 6px solid #C8C8C8;
outline-offset: -6px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.container-overlay{
width: 100%;
height: 100%;
background-color:white;
opacity: 0;
position:absolute;
-webkit-transition: opacity 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in;
-o-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
}
.container:hover .container-overlay{
opacity: 0.5;
}
.container:hover img{
outline: 6px solid rgba(200,200,200,0);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.icons{
opacity: 0;
position: absolute;
}
.icons li{
float: left;
padding: 10px;
}
.container:hover .icons{
opacity: 1;
}
HTML
<div class="container" id="{postID}">
<div class="container-overlay"></div>
<div class="icons">
<ul>
<li>{ReblogButton color="red" size="30"}</li>
<li>{LikeButton color="red" size="30"}</li>
<li>{NoteCount}</li>
</ul>
</div>
{block:Photo}
<li><a href="{permalink}">
<img src="{block:indexpage}{PhotoURL-500}{/block:indexpage}{block:permalinkpage}{PhotoURL-HighRes}{/block:permalinkpage}" alt="{PhotoAlt}">
</a> </li>
{/block:Photo}
</div>
You could do something like this:
.icons ul {
margin:0;
padding: 0;
}
.icons {
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
.icons li {
float: none;
display: inline-block;
}
Rather than keep the float: none;, just remove the original float declaration.

Can't figure out what's wrong with my syntax

as you can see here http://jsfiddle.net/Ec8kN/ , my css circles are not working properly. Initially I only had one class .circle that I used several times to have multiple circles and it was working fine. I then decided to name each circle differently (i.e. circle-1, circle-2, circle-3) to get a better control with JS at a later stage.
That's where the issues started. Now that I renamed them circle-1, circle-2, etc they won't display correctly anymore. What could be the issue? Many thanks
<div class="circle-1 circlebackground circle_5px_marging">
<p>Créativité</p>
<div class="innercircle">
<p>Le fdfd stimule la dfdsfd du fdfds en le dfdfd à réinventer sa dfdsf de la dfds dfs et donc les fdsfs qu’il peut y fdssf.</p>
</div>
</div>
<div class="circle-2 circlebackground circle_5px_marging">
<p>Circle 2</p>
<div class="innercircle">
<p>by Angela</p>
</div>
</div>
<div class="circle-3 circlebackground">
<p>Circle 3</p>
<div class="innercircle">
<p>by Angela</p>
</div>
</div>
.circle_5px_marging {
margin-right: 30px;
}
.circle-1, .circle-2, .circle-3 {
position: relative;
float: left;
margin-bottom: 10px;
width: 220px;
height: 220px;
border-radius: 50%;
box-shadow: inset 0 0 0 0px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.circlebackground {
border:1px solid #2970AE;
background: #FFF;
}
.innercircle {
position: absolute;
width: inherit;
height: inherit;
border-radius: 50%;
background: #2970AE;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.circle-1, .circle-2, .circle-3 p {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
color: #2970AE;
letter-spacing: 1px;
font-weight: 700;
font-size: 14px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.innercircle p {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
color:#fff;
text-align: center;
font-weight: 300;
font-size: 10px;
opacity: 1;
-webkit-transition: all 1s ease-in-out 0.4s;
-moz-transition: all 1s ease-in-out 0.4s;
-ms-transition: all 1s ease-in-out 0.4s;
-o-transition: all 1s ease-in-out 0.4s;
transition: all 1s ease-in-out 0.4s;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.circle-1:hover {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.circle-1:hover .innercircle {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.circle-1:hover .innercircle p {
opacity: 1;
}
.clear {
clear: both;
}
Change .circle-1, .circle-2, .circle-3 p to .circle-1 p, .circle-2 p, .circle-3 p. It should work.
As it is now, the properties set under this rule will apply to elements with class as circle-1, circle-2 and the p tag under all elements with class as circle-3.
Fiddle Demo
You need to fix one selector:
.circle-1 p, .circle-2 p, .circle-3 p
Instead of:
.circle-1, .circle-2, .circle-3 p
Like I've written on the previous question of yours, the current selector is applied on .circle-1, .circle-2, and all paragraphs inside .circle-3. If you want it to be applied on every paragraph inside those classes you have to address p on each class separately.
jsFiddle Demo
I can only advise you to restore the common circle class, then add a different id to each circle (e.g. id="circle1") and use the # CSS operator (e.g. #circle1) to customize each circle. That way you can tidy up your CSS code a little bit. For example, your first circle:
<div id="circle-1" class="circle circlebackground circle_5px_marging">
<p>Créativité</p>
<div class="innercircle">
<p>Le fdfd stimule la dfdsfd du fdfds en le dfdfd à réinventer sa dfdsf de la dfds dfs et donc les fdsfs qu’il peut y fdssf.</p>
</div>
Look here.
Going back to one css class for your circles is the way to go. If you need to distinguish them in Javascript then add an id to each circle.
From W3 Schools: The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
Furthermore accessing Ids in Javascript is easier and faster than accessing classes. Even though frameworks make it easy and browser are pretty fast nowadays.
I have found the problem.
There is no syntax error but the Circle 1 you have gets overlapped by Circle-2 which you can see by hiding circle 2.
So you just need to change the position of the circle 2.