Teaserboxen mit Text und Link

Teaserboxen ohne Plugin, reines CSS und html. Diese Boxen sind als Teaser geeignet, um Interesse zu wecken und den Nutzerstrom zu lenken.

Die Links führen in dieser Demo nirgendwo hin.

Bei den letzten 3 Boxen wurden width und height des inneren div per inline-CSS überschrieben.

Der äußere Container (<div class="tplge_teaserboxContainer"> ... </div>) ist nur wegen des Rahmens und der Schatten da (die waren vor Zeiten mal unverzichtbar ). Wenn man ihn einfach weglässt, sieht das ganze so aus:

Der html Code:

(Bearbeitungsmodus Quelltextansicht)

<div class="tplge_teaserboxContainer">
<div class="tplge_teaserbox" style="background: #ccc url('userfiles/images/camerota250x250.jpg');">
<div>
<p>Ein wenig Text<br>Ein wenig mehr Text</p>
<a href="#">der Link »</a>
</div>
</div>
</div>
...

Der CSS Code:

(stylesheet.css des Templates)

.tplge_teaserbox a:link {
display: table;
background: #900;
color: #fff;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 3px;
padding: 6px 12px;
margin: 3px auto;
text-decoration: none;
text-transform: uppercase;
}
.tplge_teaserbox a:visited {color: #fff; text-decoration: none;}
.tplge_teaserbox a:hover {color: #eee; text-decoration: none;}
.tplge_teaserbox a:active {color: #eee; text-decoration: none;}
.tplge_teaserbox a:focus {color: #eeetext-decoration: none;}

.tplge_teaserboxContainer {
display: table;
float: left;
background: #fff;
font-size: 16px;
border: 1px solid #aaa;
border-radius: 3px;
margin: 9px;
box-shadow: 3px 3px 6px #666;
}
.tplge_teaserbox {
display: table;
float: left;
background-size: 100%!important;
color: #fff;
text-align: center;
margin: 6px;
}
.tplge_teaserbox div {
width: 210px;
height: 210px;
background: url('../../userfiles/images/transp50.png');
padding: 12px;
opacity: 0;
}
.tplge_teaserbox div:hover {
opacity: 1;
animation: divopacity 1s;
}
.tplge_teaserbox span {
background: #900;
padding: 6px 12px;
margin: 10px auto;
}
@keyframes divopacity{from{opacity: 0;}to{opacity: 1;}}
@media (max-width: 360px) {
.tplge_teaserbox div {max-width: 210px; max-height: 210px;}
}