Как кнопка появляется при наведении на изображение

Question

Может ли кто-нибудь указать направление добавления подобной системы при наведении на изображение?

Я пробовал поиск в Google для ответа, но я могу только показаться, что натолкнулся на счетчики попадания, которые я не ищу.

<div id="nextpage"> 
    <a href="pages/2.php">Next</a> 
</div> 

<div id="header"> 
    <div class="headerleft">AceyAvatars - Created by  <ahref="http://steamcommunity.com/id/aceywolf3" target="_blank">AceyWolf</a> | THE PLACE FOR A FRESH AVATAR! 
</div> 

<div class="headerright"> 
    <script language="javascript" src="js/liveclock.js"></script> 
</div> 

<div id="imagecontent"> 
    <div id="howto"> 
     <div class="rightclick"><font color="yellow">TO USE AN IMAGE:</font> RIGHT CLICK -> SAVE IMAGES AS <font color="#fff">|</font> STEAM: <font color="yellow"> EDIT PROFILE -> SELECT IMAGE -> UPLOAD</font></div> 
    <div class="leftclick">IMAGES UPLOADED: 250</div> 
</div> 

<div class="images"> 
<div class="actualimage"><img src="css/images/avatars/1.png" width="184" height="184" title="Right Click -> Save Image" /></div> 
<div class="actualimage"><img src="css/images/avatars/2.png" width="184" height="184" title="Right Click -> Save Image" /></div> 
<div class="actualimage"><img src="css/images/avatars/3.png" width="184" height="184" title="Right Click -> Save Image" /></div> 
<div class="actualimage"><img src="css/images/avatars/4.jpg" width="184" height="184" title="Right Click -> Save Image" /></div> 
<div class="actualimage"><img src="css/images/avatars/5.jpg" width="184" height="184" title="Right Click -> Save Image" /></div> 
<div class="actualimage"><img src="css/images/avatars/6.png" width="184" height="184" title="Right Click -> Save Image" /></div> 
</div> 
<br /> 

<div class="images2"> 
<div class="actualimage"><img src="css/images/avatars/7.png" width="184" height="184" title="Right Click -> Save Image" /></div> 
<div class="actualimage"><img src="css/images/avatars/8.png" width="184" height="184" title="Right Click -> Save Image" /></div> 
<div class="actualimage"><img src="css/images/avatars/9.jpg" width="184" height="184" title="Right Click -> Save Image" /></div> 
<div class="actualimage"><img src="css/images/avatars/10.jpg" width="184" height="184" title="Right Click -> Save Image" /></div> 
<div class="actualimage"><img src="css/images/avatars/11.jpg" width="184" height="184" title="Right Click -> Save Image" /></div> 
<div class="actualimage"><img src="css/images/avatars/12.jpg" width="184" height="184" title="Right Click -> Save Image" /></div> 
</div> 
<br /> 

<div class="images"> 
<div class="actualimage"><img src="css/images/avatars/13.jpg" width="184" height="184" title="Right Click -> Save Image" /></div> 
<div class="actualimage"><img src="css/images/avatars/14.jpg" width="184" height="184" title="Right Click -> Save Image"/></div> 
<div class="actualimage"><img src="css/images/avatars/15.jpg" width="184" height="184" title="Right Click -> Save Image" /></div> 
<div class="actualimage"><img src="css/images/avatars/16.jpg" width="184" height="184" title="Right Click -> Save Image" /></div> 
<div class="actualimage"><img src="css/images/avatars/17.jpg" width="184" height="184" title="Right Click -> Save Image" /></div> 
<div class="actualimage"><img src="css/images/avatars/18.jpg" width="184" height="184" title="Right Click -> Save Image" /></div> 
</div> 
</div> 

-

div#header { 
width: 100%; 
height: 50px; 
background-color: #2980b9; 
position: fixed; 
left: 0; 
right: 0; 
top: 0; 
font-family: 'VT323', monospace; 
border-bottom: 2px solid #000; 
} 
.headerleft { 
float: left; 
font-size: 1.3em; 
padding: 12px; 
margin-left: 20px; 
} 
.headercenter { 
float: left; 
margin-left: 70px; 
} 
.headerright { 
float: right; 
padding: 12px; 
font-size: 1.3em; 
color: #000; 
} 
/*////////////////////////////////*/ 
div#imagecontent { 
text-align: center; 
width: 1300px; 
height: 800px; 
margin-top: 100px; 
margin-left: auto; 
margin-right: auto; 
} 
.images { 
padding: 20px; 
background-color: rgba(0, 0, 0, 0.5); 
margin-top: 13px; 
border: 3px solid #000; 
box-shadow: 0px 0px 10px #000; 
border-radius: 10px; 
font-family: 'Varela Round', sans-serif; 
} 
.images2 { 
padding: 20px; 
width: 1230px; 
background-color: rgba(52, 152, 219,1.0); 
margin-top: -18px; 
margin-bottom: -32px; 
margin-left: 10px; 
border-left: 3px solid #000; 
border-right: 3px solid #000; 
font-family: 'Varela Round', sans-serif; 
} 
.actualimage { 
line-height: 0; 
border: 3px solid #000; 
width: 184px; 
height: 184px; 
display: inline-block; 
box-shadow: 0px 0px 10px #000; 
} 
/*//////////////////////////////////////////*/ 
div#nextpage { 
transition: 0.3s; 
position: fixed; 
width: 110px; 
padding: 10px; 
border-top: 2px solid #000; 
border-left: 2px solid #000; 
border-bottom: 2px solid #000; 
float: left; 
margin-left: 94%; 
font-size: 1.3em; 
font-family: 'Varela Round', sans-serif; 
background-color: rgba(0, 0, 0, 0.3); 
color: #2980b9; 
} 
div#nextpage:hover { 
transition: 0.3s; 
margin-left: 92%; 
width: 140px; 
} 
div#nextpage a { 
color: #2980b9; 
text-decoration: none; 
font-size: 1.3em; 
transition: 0.3s; 
font-family: 'VT323', monospace; 
} 
div#nextpage a:hover { 
font-size: 1.4em; 
transition: 0.3s; 
text-shadow: 0px 0px 7px #000; 
} 
div#previouspage { 
transition: 0.3s; 
position: fixed; 
width: 130px; 
padding: 10px; 
border-top: 2px solid #000; 
border-right: 2px solid #000; 
border-bottom: 2px solid #000; 
float: left; 
font-size: 1.3em; 
font-family: 'Varela Round', sans-serif; 
background-color: rgba(0, 0, 0, 0.3); 
color: #2980b9; 
text-align: right; 
} 
div#previouspage:hover { 
transition: 0.5s; 
width: 150px; 
} 
div#previouspage a { 
color: #2980b9; 
text-decoration: none; 
font-size: 1.3em; 
transition: 0.3s; 
font-family: 'VT323', monospace; 
text-align: right; 
} 
div#previouspage a:hover { 
font-size: 1.4em; 
transition: 0.3s; 
text-shadow: 0px 0px 7px #000; 
} 
/*/////////////////////////////////////////////*/ 
div#howto { 
background-color: rgba(52, 152, 219,1.0); 
width: 1230px; 
margin-left: 12px; 
margin-bottom: -13px; 
border-right: 2px solid #000; 
border-top: 2px solid #000; 
border-left: 2px solid #000; 
border-top-left-radius: 10px; 
border-top-right-radius: 10px; 
padding: 20px; 
} 
.rightclick { 
display: inline-block; 
float: left; 
margin-top: -8px; 
font-family: 'VT323', monospace; 
} 
.leftclick { 
display: inline-block; 
float: right; 
margin-top: -8px; 
font-family: 'VT323', monospace; 
} 
/*///////////////////////////*/ 
div#menubar { 
width: 200px; 
height: 50px; 
background-color: rgba(52, 152, 219,0.6); 
position: fixed; 
text-align: right; 
margin-top: 70px; 
border-top: 2px solid #000; 
border-right: 2px solid #000; 
border-bottom: 2px solid #000; 
} 
.menulinks { 
padding: 15px; 
text-align: center; 
text-align: right; 
} 

Answer 1

вы можете сделать что-то вроде this in content link