Sziasztok! Bia:3 kérésére megmutatom, hogy hogyan csináltam a mostani chatat! :)
Itt a kód:
<div class="imagepluscontainer" style="width:280px; height:230px; z-index:2"><img src="YYY" /><div class="desc">XXX</div></div><br /></div>
<style>Én a három nagy piros X helyére tettem be a chat HTML kódját, és így jött ki az. De bármilyen szöveget, kódot berakhattok a helyére..imagepluscontainer{position: relative;z-index: 1;}.imagepluscontainer img{position: relative;z-index: 2;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}.imagepluscontainer:hover img{-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);-moz-transform: scale(1.05, 1.05);-webkit-transform: scale(1.05, 1.05);-ms-transform: scale(1.05, 1.05);-o-transform: scale(1.05, 1.05);transform: scale(1.05, 1.05);}.imagepluscontainer div.desc{position: absolute;width: 90%;z-index: 1;bottom: 0;left: 5px;padding: 8px;background: rgba(0, 0, 0, 0.8);color: white;-moz-border-radius: 0 0 8px 8px;-webkit-border-radius: 0 0 8px 8px;border-radius: 0 0 8px 8px;opacity: 0; /* Set initial opacity to 0 */-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);-moz-transition: all 0.5s ease 0.5s;-webkit-transition: all 0.5s ease 0.5s;-o-transition: all 0.5s ease 0.5s;-ms-transition: all 0.5s ease 0.5s;transition: all 0.5s ease 0.5s;}.imagepluscontainer div.desc a{color: white;}.imagepluscontainer:hover div.desc{-moz-transform: translate(0, 100%);-webkit-transform: translate(0, 100%);-ms-transform: translate(0, 100%);-o-transform: translate(0, 100%);transform: translate(0, 100%);opacity:1; /* Reveal desc DIV fully */}.imagepluscontainer div.rightslide{width: 150px;top:15px;right:0;left:auto;bottom:auto;padding-left:15px;-moz-border-radius: 0 8px 8px 0;-webkit-border-radius: 0 8px 8px 0;border-radius: 0 8px 8px 0;}.imagepluscontainer:hover div.rightslide{-moz-transform: translate(100%, 0);-webkit-transform: translate(100%, 0);-ms-transform: translate(100%, 0);-o-transform: translate(100%, 0);transform: translate(100%, 0);}.imagepluscontainer div.leftslide{width: 150px;top:15px;left:0;bottom:auto;padding-left:15px;-moz-border-radius: 8px 0 0 8px;-webkit-border-radius: 8px 0 0 8px;border-radius: 8px 0 0 8px;}.imagepluscontainer:hover div.leftslide{-moz-transform: translate(-100%, 0);-webkit-transform: translate(-100%, 0);-ms-transform: translate(-100%, 0);-o-transform: translate(-100%, 0);transform:translate(-100%, 0);}.imagepluscontainer div.upslide{top:0;bottom:auto;padding-bottom:10px;-moz-border-radius: 8px 8px 0 0;-webkit-border-radius: 8px 8px 0 0;border-radius: 8px 8px 0 0;}.imagepluscontainer:hover div.upslide{-moz-transform: translate(0, -100%);-webkit-transform: translate(0, -100%);-ms-transform: translate(0, -100%);-o-transform: translate(0, -100%);transform:translate(0, -100%);}</style>
És a három kék Y helyére az általatok kiválasztott kép URL-je megy. Remélem tudtam segíteni :)
(/A kód a http://kritika-design.blogspot.hu - tól származik!/)
A YYY-hez és a XX-hez mit kell írni???
VálaszTörlésAz YYY-hoz én a chat HTML kódját tettem be, de bármilyen szöveget is írhatsz. Az YYY-hoz kell az általad választott kép URL-jét :)
VálaszTörlés