Genellikle haber sitelerinde, magazin bloglarında denk geliyoruz. Haberlerin üzerine geldiğimizde resim üzerinde yazılar gelip devamı şeklinde buton yer alıyor. Bunu her türlü tasarımda görsellik açısından kullanabilirsiniz. Buradan demoya bakabilirsiniz.
Style Kodları
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300,100&subset=latin,latin-ext); section.panel { display: inline-block; background-size: 100% 100%; background-position: center center; height: 300px; position: relative; overflow: hidden; transition: background .5s; z-index: 1; float: left; -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 0 5px 10px 2px rgba(1, 1, 1, 0.1); width: 19.5%; margin: 0 .25% 10px; } section.panel:after { background-color: rgba(1, 1, 1, 0.5); position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 2; content: ''; transition: background .5s; } section.panel:hover { background-size: 120% 120%; background-position: center 100%; } section.panel:hover:after { background-color: rgba(1, 1, 1, 0.3); } section.panel > div { position: relative; top: 100%; background-color: #FFF; height: 100%; transition: top .5s, opacity .5s; z-index: 3; color: #212121; font: 300 14px Roboto, sans-serif; padding: 10px; } section.panel:hover > div { top: 30%; } section.panel > div > h2 { text-align: center; color: #FFF; position: absolute; top: -173px; left: 0; right: 0; font: 300 18px Roboto, sans-serif; text-shadow: 1px 1px 5px rgba(1, 1, 1, 0.7); transition: top .5s; } section.panel > div > p { position: relative; max-height: 140px; overflow: auto; padding-right: 10px; line-height: 20px; margin: 0; } section.panel > div a { margin-top: 5px; border: 1px solid #212121; display: block; text-decoration: none; text-align: center; color: #212121; font-weight: 400; transition: background .5s color .5s; padding: 10px 5px; } section.panel, section.panel > div a { border-radius: 5px; } section.panel > div a:hover { background-color: #212121; color: #FFF; } section.panel > div > p::-webkit-scrollbar { width: 3px; height: 1px; transition: all .5s; } section.panel > div > p::-webkit-scrollbar-track { background-color: #FFF; } section.panel > div > p::-webkit-scrollbar-thumb { background-color: #9e9e9e; } section.panel > div > p::-webkit-scrollbar-thumb:hover { background-color: #5677fc; } section.panel > div > p::-webkit-scrollbar-thumb:active { background-color: #3f51b5; } section.panel:hover > div > h2 { top: -73px; } @media (max-width: 1200px) { section.panel { width: 32%; margin: 0 0.6% 10px 0.6%; } } @media (max-width: 992px) { section.panel { width: 100%; margin-bottom: 10px; } }Haber Kutu Örnek Kodları
Lorem Ipsum Nedir?
Lorem Ipsum dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Devamı
