CODEWITHSUNDEEP
htmlimagecss-positionz-index
Alex Wohlbruck
Alex Wohlbruck

Reputation: 1436

Position two images on top of another

I have some social media icons at the bottom of my page. They are png images, and I would like to replace those images with a different one when they are hovered. I want to use the first solution given here and put the two images on top of one another.

However, I'm having trouble putting the images on top of each other. I'm not sure what the right positioning is to use in order to make this work. Can someone give me a hint? (Not insterested in using JavaScript for this, I don't know how that works yet.

HTML

<div class="footer" align="center">
        <ul>
            <li>Follow Us:</li>
            <a><img src="Images/Social Icons/Facebook-Hover.png"><img src="Images/Social Icons/Facebook.png"></a>
            <a><img src="Images/Social Icons/Twitter-Hover.png"><img src="Images/Social Icons/Twitter.png"></a>
            <a><img src="Images/Social Icons/Instagram-Hover.png"><img src="Images/Social Icons/Instagram.png"></a>
            <a><img src="Images/Social Icons/Pinterest-Hover.png"><img src="Images/Social Icons/Pinterest.png"></a>| 
            <li><a>About Us</a></li> | 
            <li><a>Ask Us</a></li> | 
            <li><a>Contact Us</a></li>
        </ul>
</div>

CSS:

.footer {
    background-color: #061336;
    padding: 15px;
    padding-bottom: 25px;
    position: fixed;
    width: 100%;
    bottom: 0px;
}

.footer li {
    font-family: Roboto, Arial;
    margin-left: 10px;
    margin-right: 20px;
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    transition: ease-in-out all 200ms;
    -moz-transition: ease-in-out all 200ms;
    -webkit-transition: ease-in-out all 200ms;
    -o-transition: ease-in-out all 200ms;
}

.footer li:hover {
    opacity: .7;
    transition: ease-in-out all 200ms;
    -moz-transition: ease-in-out all 200ms;
    -webkit-transition: ease-in-out all 200ms;
    -o-transition: ease-in-out all 200ms;
}

.footer img {
    height: 25px;
    margin-left: 3px;
    margin-right: 3px;
    right: 13px;
    top: 6px;
    position: relative;
}

Upvotes: 0

Views: 301

Answers (3)

verthandi
verthandi

Reputation: 74

This is what I would do instead, because, this way I don't have to struggle with "margin-top: -100px", or worse, javascript.

.myicon{
  width:50px;
  height:50px;
  background:red; 
  -moz-transition: background .25s ease-in-out;
  -webkit-transition: background .25s ease-in-out;
  transition: background .25s ease-in-out;
}
.myicon:hover{
  background:blue;
}
<div class='myicon'></div>

Upvotes: 0

Dan Cowell
Dan Cowell

Reputation: 385

There's a pretty simple solution using the :first-child CSS selector.

.footer ul a {
    display: block;
    position: relative;
    width: [your icon width]px;
    height: [your icon height]px;
}

.footer ul a img {
    position: absolute;
    top: 0;
    left: 0;
}

.footer ul a img:first-child {
    opacity: 0;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
}

.footer ul a:hover img:first-child {
    opacity: 0.7;
}

Upvotes: 1

edonbajrami
edonbajrami

Reputation: 2206

Create sprite sheet images - Here you can find tutorial how to create http://css-tricks.com/css-sprites/

Upvotes: 0

Related Questions