Hover class

rosaro · 09.03.2013

Liebes Forum,

ich bin gerade dabei bei meiner WP Seite etwas umzugestalten...
Und irgendwie stehe ich auf dem Schlauch, oder ich habe mir jetzt schon zu viele Möglichkeiten/Tutorials angeschaut....

Mit CSS würde ich gerne eine ganz kleine Bilder-Gallerie erstellen/animieren. Beim drüberfahren (hover) soll der verlinkte Post-Titel erscheinen. Grundlegend sieht es eigentlich nicht schlecht aus. Ergo: Gallerie steht.
AUSSER: es wird der 3. Titel im 1. Bild angezeigt.
Ich nehme an irgend ein div container floatet falsch ? Oder ? Ach ich weiss nun auch nicht mehr. Ich hab den Code mittlerweile versaut vor lauter Tuts...grr

Eigentlich ist das doch gar nicht so schwer......:uhm:

Kann jemand helfen?

Hier mal:

PHP:

<div class="twelvecol last">
            <div class="spec-cat">
                <h1>SPECIAL's</h1>
                <?php
                    $args = array('posts_per_page' => 4 );
                    $query = new WP_Query( $args );
                    while ($query->have_posts()) : $query->the_post();
                ?>
                
                <div class="spec-art">
                        <?php the_post_thumbnail('post-thumb'); ?>
                    <div class="spec-caption">
                        <li><a href="<?php the_permalink(); ?>"><?php the_title();?></a>
                        </li>
                    </div>
                </div>

                <?php
                    endwhile;
                ?>
            </div>
        </div>

Und viel wichtiger CSS:

Code:

/* ====Special Cat.==== */
.spec-cat {
}
.spec-art {
    width:250px:;
    display:inline;
    position:relative;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index:1;

}
.spec-art img {
    width:25%;
    float: left; 
    margin: 0 20px 20px 0; 
}

.spec-art .spec-caption {
    position: absolute;
    color:#050505; 
    opacity: 0;
    z-index:2;
    display: block;
    }
.spec-art .spec-caption li a{
    display: inline;
    position:relative
}
.spec-art .spec-caption:hover { 
    opacity: 1;
    background-color:#396
}

Danke schon mal für Tipps und Vorschläge

hub · 09.03.2013

AW: Hover class

Moin moin,
auf den ersten Blick sieht dein Code ok aus. Hast du einen Link, bei dem man sich das Problem genauer anschauen kann, oder den Html-Code, der produziert wird?

Gruß Ulli

rosaro · 09.03.2013

AW: Hover class

Es liegt leider noch lokal bei mir aufm Rechner....aber hier der html-Code, der produziert wird:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html lang="en">  <head>              <title>VINT | AGENCY</title>         <meta charset="utf-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />          <!-- 1140px Grid styles for IE -->     <!--[if lte IE 9]><link rel="http://localhost:8888/wordpress/wp-content/themes/VA/ie.css" type="text/css" media="screen" /><![endif]-->      <!-- The 1140px Grid - http://cssgrid.net/ -->     <link rel="stylesheet" href="http://localhost:8888/wordpress/wp-content/themes/VA/1140.css" type="text/css" media="screen" />          <!-- Your styles -->     <link href="http://localhost:8888/wordpress/wp-content/themes/VA/style.css " type="text/css" rel="stylesheet" media="screen" />          <!-- Favicon ???? -->     <link rel="shortcut icon" href="http://localhost:8888/wordpress/wp-content/themes/VA/images/icons/favicon.ico" type="image/x-icon" />          <!--css3-mediaqueries-js - http://code.google.com/p/css3-mediaqueries-js/ - Enables media queries in some unsupported browsers-->     <script type="text/javascript" src="http://localhost:8888/wordpress/wp-content/themes/VA/js/css3-mediaqueries.js"></script>          <!-- Slider-->     <link rel="stylesheet" type="text/css" href="http://localhost:8888/wordpress/wp-content/themes/VA/flexslider.css">           <meta name='robots' content='noindex,nofollow' /> <link rel='stylesheet' id='admin-bar-css'  href='http://localhost:8888/wordpress/wp-includes/css/admin-bar.min.css?ver=3.5.1' type='text/css' media='all' /> <script type='text/javascript' src='http://localhost:8888/wordpress/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8888/wordpress/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost:8888/wordpress/wp-includes/wlwmanifest.xml" />  <meta name="generator" content="WordPress 3.5.1" /> <style type="text/css" media="print">#wpadminbar { display:none; }</style> <style type="text/css" media="screen">     html { margin-top: 28px !important; }     * html body { margin-top: 28px !important; } </style>  </head>   <body>  <div class="container">     <div class="row" id="logo_row">         <div class="tencol" id="logo">         <a href="http://localhost:8888/wordpress"><img src="http://localhost:8888/wordpress/wp-content/themes/VA/images/logo.png"></a>         </div>         <div class="twocol last" id="top_links">             <ul id="sm_nav">             <li><a class="social-icons" href="https://www.facebook.com/" title="Facebook" alt="Facebook"><img src="http://localhost:8888/wordpress/wp-content/themes/VA/images/icons/FB.png"/></a></li>             <li><a class="social-icons" href="https://www.facebook.com/" title="Facebook" alt="Facebook"><img src="http://localhost:8888/wordpress/wp-content/themes/VA/images/icons/P.png"/></a></li>                        <li><a class="social-icons" href="https://www.facebook.com/" title="Facebook" alt="Facebook"><img src="http://localhost:8888/wordpress/wp-content/themes/VA/images/icons/TW.png"/></a></li>                     </ul>                </div>     </div> </div>  <div class="container">     <div class="row" id="nav1_row">         <div class="twelvecol last nav-bar">             <nav class="main-nav"><ul id="menu-main-nav" class="menu"><li id="menu-item-931" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-931"><a href="http://localhost:8888/wordpress/">HOME</a></li> <li id="menu-item-924" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-920 current_page_item current_page_parent menu-item-924"><a href="http://localhost:8888/wordpress/blog/">BLOG</a></li> <li id="menu-item-917" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-917"><a href="http://localhost:8888/wordpress/about-us-2/">ÜBER UNS</a></li> </ul></nav>          </div>     </div> </div>   </body> <section>   <div class="container">      <div class="row">         <div class="twelvecol last">           <div class="flexslider">             <ul class="slides">                                 <li class="featured-game">                 <img width="226" height="250" src="http://localhost:8888/wordpress/assets/Bildschirmfoto-2013-01-18-um-10.56.10.png" class="attachment-featured wp-post-image" alt="Bildschirmfoto 2013-01-18 um 10.56.10" />                <div class="caption">                     <a href="#" class="game-title">nummer drei und somit NEU</a>                     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit a</p>                     <a href="#" class="playnow">needalink?</a>                 </div>               </li>                                           <li class="featured-game">                 <img width="400" height="200" src="http://localhost:8888/wordpress/assets/Alle-wurden-400x200.png" class="attachment-featured wp-post-image" alt="Alle-wurden" />                <div class="caption">                     <a href="#" class="game-title">Zweiter Eintrag</a>                     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, [...]</p>                     <a href="#" class="playnow">needalink?</a>                 </div>               </li>                                           <li class="featured-game">                 <img width="200" height="137" src="http://localhost:8888/wordpress/assets/Bildschirmfoto-2013-01-18-um-11.06.18-e1362569086985.png" class="attachment-featured wp-post-image" alt="Wageio" />                <div class="caption">                     <a href="#" class="game-title">Zu hause bei Herrn Wagenfeld</a>                     <p>giufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj [...]</p>                     <a href="#" class="playnow">needalink?</a>                 </div>               </li>                                    </ul>         </div>        </div>     </div>   </div> </section>  <section>     <div class="container">      <div class="row">         <div class="twelvecol last">             <div class="spec-cat">                 <h1>SPECIAL's</h1>                                                  <div class="spec-art">                         <img width="113" height="125" src="http://localhost:8888/wordpress/assets/Bildschirmfoto-2013-01-18-um-10.56.10.png" class="attachment-post-thumb wp-post-image" alt="Bildschirmfoto 2013-01-18 um 10.56.10" />                    <div class="spec-caption">                         <li><a href="http://localhost:8888/wordpress/2013/03/nummer-drei-und-somit-neu/">nummer drei und somit NEU</a>                         </li>                     </div>                 </div>                                                   <div class="spec-art">                         <img width="200" height="125" src="http://localhost:8888/wordpress/assets/Alle-wurden-200x125.png" class="attachment-post-thumb wp-post-image" alt="Alle-wurden" />                    <div class="spec-caption">                         <li><a href="http://localhost:8888/wordpress/2013/03/zweiter-eintrag/">Zweiter Eintrag</a>                         </li>                     </div>                 </div>                                                   <div class="spec-art">                         <img width="182" height="125" src="http://localhost:8888/wordpress/assets/Bildschirmfoto-2013-01-18-um-11.06.18-e1362569086985.png" class="attachment-post-thumb wp-post-image" alt="Wageio" />                    <div class="spec-caption">                         <li><a href="http://localhost:8888/wordpress/2013/02/zu-hause-bei-herrn-wagenfeld/">Zu hause bei Herrn Wagenfeld</a>                         </li>                     </div>                 </div>                              </div>         </div>     </div> </div> </section>  <div class="container">     <div class="row" id="footer_row">         <div class="eightcol" id="footer">             <p> © R.B.</p>         </div>         <div class="fourcol last" id="ftr_rechts">                                                    <li><a href="#">Impressum</a></li>                 </div>     </div> </div>  <script type="text/javascript" src="http://localhost:8888/wordpress/wp-content/themes/VA/js/jquery.flexslider.js" ></script> <script type="text/javascript">     // Can also be used with $(document).ready()     jQuery(window).load(function() {       jQuery('.flexslider').flexslider({         animation: "slide"       });     }); </script>  </body> </html>

rosaro · 09.03.2013

AW: Hover class

Tschuldigung...

So sieht er besser aus, bzw. man kann ihn besser lesen

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="en">

<head>
        
    <title>VINT | AGENCY</title>
        <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- 1140px Grid styles for IE -->
    <!--[if lte IE 9]><link rel="http://localhost:8888/wordpress/wp-content/themes/VA/ie.css" type="text/css" media="screen" /><![endif]-->

    <!-- The 1140px Grid - http://cssgrid.net/ -->
    <link rel="stylesheet" href="http://localhost:8888/wordpress/wp-content/themes/VA/1140.css" type="text/css" media="screen" />
    
    <!-- Your styles -->
    <link href="http://localhost:8888/wordpress/wp-content/themes/VA/style.css " type="text/css" rel="stylesheet" media="screen" />
    
    <!-- Favicon ???? -->
    <link rel="shortcut icon" href="http://localhost:8888/wordpress/wp-content/themes/VA/images/icons/favicon.ico" type="image/x-icon" />
    
    <!--css3-mediaqueries-js - http://code.google.com/p/css3-mediaqueries-js/ - Enables media queries in some unsupported browsers-->
    <script type="text/javascript" src="http://localhost:8888/wordpress/wp-content/themes/VA/js/css3-mediaqueries.js"></script>
    
    <!-- Slider-->
    <link rel="stylesheet" type="text/css" href="http://localhost:8888/wordpress/wp-content/themes/VA/flexslider.css">

    
    <meta name='robots' content='noindex,nofollow' />
<link rel='stylesheet' id='admin-bar-css'  href='http://localhost:8888/wordpress/wp-includes/css/admin-bar.min.css?ver=3.5.1' type='text/css' media='all' />
<script type='text/javascript' src='http://localhost:8888/wordpress/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8888/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost:8888/wordpress/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 3.5.1" />
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
    html { margin-top: 28px !important; }
    * html body { margin-top: 28px !important; }
</style>

</head>


<body>

<div class="container">
    <div class="row" id="logo_row">
        <div class="tencol" id="logo">
        <a href="http://localhost:8888/wordpress"><img src="http://localhost:8888/wordpress/wp-content/themes/VA/images/logo.png"></a>
        </div>
        <div class="twocol last" id="top_links">
            <ul id="sm_nav">
            <li><a class="social-icons" href="https://www.facebook.com/" title="Facebook" alt="Facebook"><img src="http://localhost:8888/wordpress/wp-content/themes/VA/images/icons/FB.png"/></a></li>
            <li><a class="social-icons" href="https://www.facebook.com/" title="Facebook" alt="Facebook"><img src="http://localhost:8888/wordpress/wp-content/themes/VA/images/icons/P.png"/></a></li>        
               <li><a class="social-icons" href="https://www.facebook.com/" title="Facebook" alt="Facebook"><img src="http://localhost:8888/wordpress/wp-content/themes/VA/images/icons/TW.png"/></a></li>        
            </ul>        
       </div>
    </div>
</div>

<div class="container">
    <div class="row" id="nav1_row">
        <div class="twelvecol last nav-bar">
            <nav class="main-nav"><ul id="menu-main-nav" class="menu"><li id="menu-item-931" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-931"><a href="http://localhost:8888/wordpress/">HOME</a></li>
<li id="menu-item-924" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-920 current_page_item current_page_parent menu-item-924"><a href="http://localhost:8888/wordpress/blog/">BLOG</a></li>
<li id="menu-item-917" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-917"><a href="http://localhost:8888/wordpress/about-us-2/">ÜBER UNS</a></li>
</ul></nav>          </div>
    </div>
</div>


</body>
<section>
  <div class="container">
     <div class="row">
        <div class="twelvecol last">
          <div class="flexslider">
            <ul class="slides">

                
              <li class="featured-game">
                <img width="226" height="250" src="http://localhost:8888/wordpress/assets/Bildschirmfoto-2013-01-18-um-10.56.10.png" class="attachment-featured wp-post-image" alt="Bildschirmfoto 2013-01-18 um 10.56.10" />                <div class="caption">
                    <a href="#" class="game-title">nummer drei und somit NEU</a>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit a</p>
                    <a href="#" class="playnow">needalink?</a>
                </div>
              </li>
          
                
              <li class="featured-game">
                <img width="400" height="200" src="http://localhost:8888/wordpress/assets/Alle-wurden-400x200.png" class="attachment-featured wp-post-image" alt="Alle-wurden" />                <div class="caption">
                    <a href="#" class="game-title">Zweiter Eintrag</a>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, [...]</p>
                    <a href="#" class="playnow">needalink?</a>
                </div>
              </li>
          
                
              <li class="featured-game">
                <img width="200" height="137" src="http://localhost:8888/wordpress/assets/Bildschirmfoto-2013-01-18-um-11.06.18-e1362569086985.png" class="attachment-featured wp-post-image" alt="Wageio" />                <div class="caption">
                    <a href="#" class="game-title">Zu hause bei Herrn Wagenfeld</a>
                    <p>giufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj vöJGgiufn ögbj köbnaöbänbönön&lt;böbnöknö hGÖ ngöj [...]</p>
                    <a href="#" class="playnow">needalink?</a>
                </div>
              </li>
          
                        </ul>
        </div>
       </div>
    </div>
  </div>
</section>

<section>  
  <div class="container">
     <div class="row">
        <div class="twelvecol last">
            <div class="spec-cat">
                <h1>SPECIAL's</h1>
                                
                <div class="spec-art">
                        <img width="113" height="125" src="http://localhost:8888/wordpress/assets/Bildschirmfoto-2013-01-18-um-10.56.10.png" class="attachment-post-thumb wp-post-image" alt="Bildschirmfoto 2013-01-18 um 10.56.10" />                    <div class="spec-caption">
                        <li><a href="http://localhost:8888/wordpress/2013/03/nummer-drei-und-somit-neu/">nummer drei und somit NEU</a>
                        </li>
                    </div>
                </div>

                                
                <div class="spec-art">
                        <img width="200" height="125" src="http://localhost:8888/wordpress/assets/Alle-wurden-200x125.png" class="attachment-post-thumb wp-post-image" alt="Alle-wurden" />                    <div class="spec-caption">
                        <li><a href="http://localhost:8888/wordpress/2013/03/zweiter-eintrag/">Zweiter Eintrag</a>
                        </li>
                    </div>
                </div>

                                
                <div class="spec-art">
                        <img width="182" height="125" src="http://localhost:8888/wordpress/assets/Bildschirmfoto-2013-01-18-um-11.06.18-e1362569086985.png" class="attachment-post-thumb wp-post-image" alt="Wageio" />                    <div class="spec-caption">
                        <li><a href="http://localhost:8888/wordpress/2013/02/zu-hause-bei-herrn-wagenfeld/">Zu hause bei Herrn Wagenfeld</a>
                        </li>
                    </div>
                </div>

                            </div>
        </div>
    </div>
</div>
</section>

<div class="container">
    <div class="row" id="footer_row">
        <div class="eightcol" id="footer">
            <p> © R.B.</p>
        </div>
        <div class="fourcol last" id="ftr_rechts">                                       
            <li><a href="#">Impressum</a></li>        
        </div>
    </div>
</div>

<script type="text/javascript" src="http://localhost:8888/wordpress/wp-content/themes/VA/js/jquery.flexslider.js" ></script>
<script type="text/javascript">
    // Can also be used with $(document).ready()
    jQuery(window).load(function() {
      jQuery('.flexslider').flexslider({
        animation: "slide"
      });
    });
</script>

</body>
</html>

hub · 09.03.2013

AW: Hover class

Moin moin,
sieh es mir nach:
1. Im Doctype sagst du XHTML verwendest aber HTML5 Eelemente
2. Du beendest den HTML-Body vorzeitig

PHP:

</body>
<section>
  <div class="container">

3. Du verwendest LI zusammenhanglos ohne Liste, du kannst sie getrost entfernen.
4. wenn du position: absolute verwendest, musst du selbst für dei Positionierung sorgen, z.B.so (das hier war nur ein Schnelltest - das geht besser!):

PHP:

.spec-art .spec-caption {
    position: absolute;
    color:#050505; 
    opacity: 0;
    z-index:2;
    display: block;
    bottom:-30px;
    left:0;
    height: 20px;
    right: 0;
}

5. diese Fehler sorgen in der Regel immer für Katastrophen:

PHP:

width:250px:;

richtig ohne : am Ende

PHP:

width:250px;

Wenn du da durch bist, wird dir alles dort angezeigt, wo du es haben willst.
Mein Tipp: versuche die Syntax und Zusammenänge von Html und Css zu verstehen - das lernen hört nie auf ...

Gruß Ulli

rosaro · 09.03.2013

AW: Hover class

Ulli!

Ich danke DIR!!!!!

Super!
Da ich ja auch lernwillig bin - finde ich deine Anregungen, bzw. Fehler-Funde grandios!

DANKE!

Mach mich gleich mal ran!
Greez
R*

hub · 09.03.2013

AW: Hover class

Sollte es irgendwo hängen, nur keine falschen Hemmungen. Melde dich einfach wieder

Gruß Ulli