★ Light-Zoom ★

<p> </p> <p><span id="caret"> </span></p> <table width="100%"> <tbody> <tr> <td align="CENTER"> <div class="light"> <style><!-- width: 332px; height: 335px; } .image { width: 100%; height: 100%; } .light div { position: relative; } .light div::before { position: absolute; top: 50%; left: 50%; z-index: 2; display: block; content: ''; width: 0; height: 0; background: rgba(10,10,0,.2); border-radius: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } .light div:hover::before { -webkit-animation: circle .75s; animation: circle .75s; } @-webkit-keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 200%; height: 200%; opacity: 0; } } @keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 200%; height: 200%; opacity: 0; } > --></style> <div class="image"><img style="text-align: center; padding: 15px; display: block; margin-left: auto; margin-right: auto;" src="http://ekladata.com/VPL6MBTFcJTW4CFTa2n_sOruucE.png" alt=" BUNS " /></div> <div class="image"> </div> </div> <p> </p> <p> </p> <p> </p> </td> </tr> </tbody> </table>

  White -> rgba(255,255,255,.2)

★ RGB Color Codes in CSS ★

To change the background color of the heading and paragraph,

define the CSS color property with an rgb color code.

To make the latter transparent, add an "a" to "rgb" and a fourth value of 0.3 in the parentheses.