0

I have an image gallery with insert/replace/delete image options available for users. I have done displaying these options(REPLACE IMAGE and DELETE IMAGE) on the top of each images. and that options are displayed only when mouse hovering the particular image.

How to make the options appearing slowly when mouse hover

CSS

.wrap{
    position:relative;
    display:inline-block;
    }


.toggle
{   font-weight:bold;
    position:absolute;
    top:1px;  
    right:0;

    padding:0px;
    width:100%;

    text-align:right;
    /*visibility:hidden;*/
    display:none;

}   


.toggle a
{   
    text-decoration:none;
     background:#000;
    padding:0;    
    font-size:10px;  
    color:white;
    line-height:100%;
    cursor:arrow;
}


.wrap:hover .toggle
{
    /*visibility:visible;  */
    display: block;
}

HTML

 <div class="wrap">
<A name=1 href="image.php?imageid=<?php echo $imageid ?>&imageindex=<?php echo ((($page-1)*15)+$index-1) ;  ?> "><IMG  border=0 src="<?php echo $thumbpath; ?>" height="75" width="75" alt="<?php echo $caption ?>" title="<?php echo $caption ?>" ></A><BR>
<div class="toggle">
<?php
echo "<a href='delete.php?delete=yes&imageid=".$imageid.'&page='.$page."'>Delete </a>"
?>
<br>
<?php
echo "<a href='replace.php?update=yes&imageid=".$imageid.'&page='.$page."'>Replace </a>"
?>
</div>
</div>
HYDER ALI
  • 86
  • 1
  • 1
  • 11

1 Answers1

0

Use display:none and position:absolute properties to the div which needs to be toggled.

HTML

<div class="wrap">
    <img src="http://static.adzerk.net/Advertisers/d18eea9d28f3490b8dcbfa9e38f8336e.jpg" />
    <div class="toggle"><a href="#">REPLACE IMAGE</a> <a href="#"> DELETE IMAGE</a></div>
</div>

CSS

.wrap{
    position:relative;
    display:inline-block
}
.toggle{
    position:absolute;
    top:0;  
    background:Black;
    padding:4px;
    width:100%;
    display:none
}
a{
    background:red;
    padding:2px;    
    font-size:12px;  
}
.wrap:hover .toggle{
    display:block
}

DEMO

Sowmya
  • 26,684
  • 21
  • 96
  • 136