HTML, CSS hover on image

Question

I'm learning html and css, but I have some troubles. Right now I'm making a site that has a small images with different w sizes. The point is that, when you hover on them they show up clickable elements, and I can't get the right position on them.

What I have:

enter image description here

What I want:

enter image description here

Part of code for this:

            <div class="photo">
                <img src="http://placekitten.com/400/300" alt="image"/>
                <div class="zoom">
                </div>
                <div class="all">
                </div>
                <div class="link">
                </div>
                <div class="info">
                </div>
                <div class="like">
                </div>
            </div>

CSS:

.photo img {
    float:left;
    width:auto;
    height:auto;
}

.photo:hover {
    display: block;
    opacity:0.6;
}
.photo:hover .zoom {
    position: absolute;
    background-image:url(http://www.kolazhgostar.com/images/small-img05.png);
    background-repeat:no-repeat;
    width:46px;
    height:50px;
    background-position:center;

http://jsfiddle.net/zzu87/

MannfromReno · Accepted Answer · 2014-07-18 16:36:38Z

3

You need to add some positioning to each image if you use position: absolute. Try something like this:

.photo:hover .zoom {
  position: absolute;
  top: 50%;
  left: 200px;
  background-image: url(http://www.kolazhgostar.com/images/small-img05.png);
  background-repeat: no-repeat;
  width: 46px;
  height: 50px;
  background-position: center;
}

answered Jul 18, 2014 at 16:36

MannfromReno

1,2861 gold badge14 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user Over a year ago

Ok that works, but what If I want to have another picture next to it with same hover? jsfiddle.net/eW7Lc Do I have to make own class with hover for each image?

MannfromReno Over a year ago

Yes, you'll have to position each individually.

charles · Accepted Answer · 2014-07-18 16:54:39Z

This should get you where you want to go. (JS fiddle)

css

.photo {
    display:block;
    position:absolute;
    background-image: url('//placekitten.com/400/300');
    background-repeat: no-repeat;
    width:400px;
    height:300px;
}

.photo>.container {
    display:none;
}
.photo>.container>div {
    display:inline;
}

.photo:hover>.container {
    display:block;
    margin-left: 85px;
    margin-top: 200px;
}

html

<div class="photo">
    <div class="container">
        <div class="zoom">
            <img src="//www.kolazhgostar.com/images/small-img05.png"/>
        </div>
        <div class="all">
            <img src="//www.kolazhgostar.com/images/small-img05.png"/>
        </div>
        <div class="link">
            <img src="//www.kolazhgostar.com/images/small-img05.png"/>
        </div>
        <div class="info">
                        <img src="//www.kolazhgostar.com/images/small-img05.png"/>
        </div>
        <div class="like">
            <img src="//www.kolazhgostar.com/images/small-img05.png"/>
        </div>
    </div>
</div>

Aaron · Accepted Answer · 2014-07-18 16:55:29Z

1

First float the parent div left and set the position to relative. Then you'll have better control over the positioning of any child elements.

.photo {
   float:left;
   position:relative;
}

After, padding, margin, bottom, left, right, and top can be used to achieve the specific location desired inside the parent div. Here I used left and top...

.photo:hover .zoom {
   position: absolute;
   background-image:url(http://www.kolazhgostar.com/images/small-img05.png);
   background-repeat:no-repeat;
   width:46px;
   height:50px;
   background-position:center;

   left:50%;
   top:50%;
}

Here is the FIDDLE.

answered Jul 18, 2014 at 16:55

Aaron

985 bronze badges

Comments

Mauno Vähä · Accepted Answer · 2015-12-03 14:19:59Z

Interesting question. I solved the problem by making more div containers for the photo and its contents. Also, I worked under assumption that your photo images are 400x300. Modify the code as you like! :)

I think the interesting part about my solution is that I used only position: relative; which lifts up the hover menu above your images so it plays together nicely:

.photo-menu {
    position: relative;
    left: 0px;
    top: -300px;
}

Thus, most of the horizontal position is accomplished using margin: 0 auto; instead of playing too much with absolute or relative position. Generally speaking, those can be avoided most of the time. It depends.

The result can be also viewed from the following: js fiddle example or from this jsfiddle example if cat images are removed sometime later.

Linking also relevant code below:

HTML:

<div class="photo-container">

    <div class="photo">
        <img src="http://placekitten.com/400/300" alt="image"/>
        <div class="photo-menu">
              <div class="upper-menu"></div>
              <div class="lower-menu">
                   <div class="all"></div>
                   <div class="link"></div>
                   <div class="info"></div>
                   <div class="like"></div>
              </div>
        </div>
    </div>

    <div class="photo">
        <img src="http://placekitten.com/400/300" alt="image"/>
        <div class="photo-menu">
              <div class="upper-menu"></div>
              <div class="lower-menu">
                   <div class="all"></div>
                   <div class="link"></div>
                   <div class="info"></div>
                   <div class="like"></div>
              </div>
        </div>
    </div>

</div>

CSS:

body {
    margin: 0px;
    padding: 0px;
}

.photo-container {
    width: 800px;
}

.photo {
    float: left;
    width: 400px;
}

.photo, .photo-menu {
    width: 400px;
    height: 300px;
}

.photo:hover {
    display: block;
    opacity: 0.6;
}

.photo-menu {
    position: relative;
    left: 0px;
    top: -300px;
}

.photo .photo-menu {
    display: none;
}

.photo:hover .photo-menu {
    display: block;
}

.photo-menu .upper-menu {   
    background-image: url("http://www.kolazhgostar.com/images/small-img05.png");
    background-repeat: no-repeat;
    background-position: center;
    width: inherit;
    height: 200px;
    margin: 0 auto;
}

.photo-menu .lower-menu {   
    width: 280px;
    margin: 0 auto;
    height: 100px;
}

.photo-menu .lower-menu div {
    min-width: 40px;
    width: 24.9999%;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    float: left;
}

.photo-menu .lower-menu .all {  
    background-image: url("http://placehold.it/40/ff0000");
}

.photo-menu .lower-menu .link { 
    background-image: url("http://placehold.it/40/00ff00");
}

.photo-menu .lower-menu .info { 
    background-image: url("http://placehold.it/40/0000ff");
}

.photo-menu .lower-menu .like { 
    background-image: url("http://placehold.it/40/c0ff33");
}

Note: I used placehold.it to place dummy images for the icons.

Cheers.

Collectives™ on Stack Overflow

HTML, CSS hover on image

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related