CODEWITHSUNDEEP
jqueryhtmlcssimage
Sulthan Allaudeen
Sulthan Allaudeen

Reputation: 11310

Making Hovered Image to Align Center

I use the following css code to my html file, The Image that appears on the hover is ailgned in the top left, how can i make it centered?

Here is the html code

<a class="thumbnail" href="#thumb">View Sample
  <span>
    <img src="images/1.png" /><br>Simply beautiful.
  </span>
</a>

Here is the Css Code

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{

}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{

}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #F0F0F0 ;
border-radius: 20px;
padding: 0px;


visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 10;

padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

Upvotes: 1

Views: 3965

Answers (3)

Ben
Ben

Reputation: 1454

Have a look at my jsfiddle here: http://jsfiddle.net/93863/7/

css I have added: -

.thumbnail:hover span
{
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -194px;    /* Half of the popups height */
    margin-left: -190px;   /* Half of the popups width */
}

Upvotes: 2

Dylan de St Pern
Dylan de St Pern

Reputation: 469

.thumbnail:hover span{ 
visibility: visible;
top: 50%;
margin-top:-25%;
left: 230px; 
z-index: 50;
}

include "top:50%" and "margin-top:-25%" this will position it centrally.

Upvotes: 0

JunM
JunM

Reputation: 7150

Change to top: 50%;

Fiddle

.thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    top: 50%;
    left: 230px; /*position where enlarged image should offset horizontally */
    z-index: 50;
}

Upvotes: 0

Related Questions