Hallo!
Ich habe ein Problem mit dem CSS3 Image und Text Overlay Wordpress Plugin! 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 und die Bilder immer noch untereinander sind.
So wird der Code auf der Seite aufgerufen:
Ich sag schonmal danke für die Hilfe und Mühe!
Lg
Ich habe ein Problem mit dem CSS3 Image und Text Overlay Wordpress Plugin! 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 und die Bilder immer noch untereinander sind.
So wird der Code auf der Seite aufgerufen:
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]
Code:
/*
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 sag schonmal danke für die Hilfe und Mühe!
Lg