Estilo con box-shadow

por **Admin** Miér Oct 18, 2017 8:14 pm

Código:: <br><center><style type="text/css"> .et {width: 200px; height: 200px; border-radius: 300px; border: 10px solid #EBEBEB; box-shadow: 0px 0px 1px 0px #000000; display: inline-block; overflow: hidden; cursor: pointer;} .et .sombra {width: 200px; height: 200px; background-color: #3C1F39; border-radius: 300px; opacity: 0; position: absolute; margin: -200px 0px 1px 0px; transition: 1s ease-in-out; overflow: auto;} .et:hover .sombra {opacity: .7;} .et img {width: 200px; height: 200px; display: block; position: relative; margin: 0px; padding: 0px;} .et:hover img {-webkit-filter: blur(4px); transform: scale(1.5);} .et p {font-family: Calibri; font-size: 13px; color: #EBEBEB; text-align: center; transition: 1s ease-in-out; transform: translateX(-200px); padding: 3px; display: inline-block; position: relative; margin-top: 50px; font-style: italic;} .et:hover p {transform: translateX(0px);} a.moo {width: 100px; height: 20px; border: 1px solid #EBEBEB; color: #EBEBEB; display: inline-block; margin: 1px; box-shadow: inset 0px 0px 0px 0px #902121; transition: 1s ease-in-out;} a.moo:hover {box-shadow: inset 5px 0px 40px 10px #902121;}</style><div class="et"><img src="https://i62.servimg.com/u/f62/19/46/26/75/afilia10.png"><div class="sombra"><p>Bla bla bla<br><a href="#" class="moo">Un enlace</a> <a href="#" class="moo">Un enlace</a></p></div></div> </center>