<p> </p> <p><span id="caret"> </span></p> <table width="100%"> <tbody> <tr> <td align="CENTER"> <div class="zoom-out"> <style><!-- width: 332px; height: 335px; } .image { width: 100%; height: 100%; } .zoom-out div img { -webkit-transform: scale(1.25); transform: scale(1.25); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .zoom-out div:hover img { -webkit-transform: scale(1); transform: scale(1); } > --></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>

<p> </p> <p><span id="caret"> </span></p> <table width="100%"> <tbody> <tr> <td align="CENTER"> <div class="zoom"> <style><!-- width: 332px; height: 335px; } .image { width: 100%; height: 100%; } .image img { -webkit-transition: all 1s ease; /* Safari et Chrome */ -moz-transition: all 1s ease; /* Firefox */ -ms-transition: all 1s ease; /* Internet Explorer 9 */ -o-transition: all 1s ease; /* Opera */ transition: all 1s ease; } .image:hover img { -webkit-transform:scale(1.15); /* Safari et Chrome */ -moz-transform:scale(1.15); /* Firefox */ -ms-transform:scale(1.15); /* Internet Explorer 9 */ -o-transform:scale(1.15); /* Opera */ transform:scale(1.15); } > --></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>

<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.