Hallo!
Ich habe ein Problem mit dem CSS3 Image und Text Overlay! Ich schaffe es ein Bild mit dem korrektem Overlay einzubinden jedoch wenn ich ein zweites Bild anzeigen will werden diese untereinander und nicht nebeneinander angezeigt.
Hab schon versucht in der Css des Plugins umzustellen aber leider nur mit dem Resultat, dass jetzt das Overlay nicht mehr funzt.
Aufgerufen wird es im Editor so:
Code
[overlay image="http://farm6.static.flickr.com/5095/5540895982_0688039e58.jpg" alt="cool image" title="Vítězslav Krejčí"]
<h2>Fokaflex by <a href="http://www.flickr.com/photos/vkrejci/5540895982/in/pool-34427469792@N01/">Vítězslav Krejčí</a></h2>
<p>Manufacturer Druopta Prague, 1946, inspired by the Voigtlander Brilliant. It looks like a SLR, but it's just a simple fix-focus plastic box. Shutter B, 1/25, 1/50, 1/75, 1/100; aperture f/8, f/11. Roll film 120, 6x6 format.</p>
[/overlay]Hier die CSS dazu:
CSS
/*
Item Name : Josh Chernoff - GFX Complex
Author URI : http://gfxcomplex.com/
Version : 1.0.1
*/
/*
This is based off of: HoverMe - Collection of CSS3 Hover Effects
Author URI : http://themeforest.net/user/Keliah
Version : 1.0
*/
/*
Thanks To:
Roger Cyr
*/
.full_overlay {
color:white !important;
position:relative;
overflow: hidden;
position: relative;
z-index: 1;
float:left;
}
.full_overlay .overlay_content {
position: absolute;
top:0;
left:0;
min-height: 100%;
min-width:100%;
display:block;
filter: alpha(opacity=0);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* Semi-transparent background for modern browsers, black for older browsers */
background:#000000;
background: rgba(0,0,0,0.8);
/* CSS3 transitions, creates the fading effect */
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
.full_overlay:hover .overlay_content {
filter: alpha(opacity=100);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.overlay_content h1, .overlay_content h2, .overlay_content h3, .overlay_content p{
padding:0 10px !important;
color:#ffffff !important;
}
.overlay_content a {
color:#cccccc !important;
}Ich danke jetzt schonmal für die Hilfe!!
Lg
Wully