Schaltfläche wie angezeigt, wenn der Mauszeiger über das Bild bewegt wird

Question

Würde jemand in die Richtung zeigen können, ein ähnliches System hinzuzufügen, wenn man über ein Bild schwebt?

Ich habe versucht, auf Google nach einer Antwort zu suchen, aber ich kann nur scheinen, um Schlagzähler zu treffen, nach denen ich nicht suche.

<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

Sie so etwas wie this in content link