CODEWITHSUNDEEP
htmlcss
user3188853
user3188853

Reputation: 7

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><a href="{permalink}">{NoteCount}</a></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>

Upvotes: 0

Views: 56

Answers (1)

ralph.m
ralph.m

Reputation: 14345

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.

Upvotes: 1

Related Questions