Title: Mouse-Over
Last modified: 4 augustus 2016

---

# Mouse-Over

 *  [joymedesign](https://nl.wordpress.org/support/users/joymedesign/)
 * (@joymedesign)
 * [14 jaren, 6 maanden geleden](https://nl.wordpress.org/support/topic/mouse-over/)
 * Hoi,
 * Ik ben bezig met de nieuwe website van ons bedrijf Joyme Design.
    Nu willen we
   op de homepage al onze cases neerzetten in blokken.
 * De bedoeling is dat zodra de bezoeker over de afbeelding / printscreen van de
   case gaat ( mouse-over ) er een hover verschijnt met als achtergrond kleur #66c011
   met daarin een korte beschrijving. Zodra je daar op klikt gaat hij naar de pagina
   met meer info over de case.
 * Nu ben ik al 2 dagen aan het zoeken, maar krijg ik niet voor elkaar om dit te
   laten werken.
 * Kan iemand me hiermee helpen?
 * Het zou zo moeten werken:
    [http://arno.hoog.ma/likes/propaganda/](http://arno.hoog.ma/likes/propaganda/)
   [http://www.buroreng.nl/nl/projecten/websites/](http://www.buroreng.nl/nl/projecten/websites/)
 * De website waar het om gaat is: [http://www.joymedesign.com/](http://www.joymedesign.com/)
 * Alvast heel erg bedankt voor de hulp!
 * Naomi en Phil
    Joyme Design

15 reacties aan het bekijken - 1 tot 15 (van in totaal 21)

1 [2](https://nl.wordpress.org/support/topic/mouse-over/page/2/?output_format=md)
[→](https://nl.wordpress.org/support/topic/mouse-over/page/2/?output_format=md)

 *  [profenx12](https://nl.wordpress.org/support/users/profenx12/)
 * (@profenx12)
 * [14 jaren, 6 maanden geleden](https://nl.wordpress.org/support/topic/mouse-over/#post-33742)
 * Hey!
 * Misschien heb je iets aan deze tutorial:
 * [http://aceinfowayindia.com/blog/2010/02/how-to-create-simple-css-image-rollover-effect/](http://aceinfowayindia.com/blog/2010/02/how-to-create-simple-css-image-rollover-effect/)
 * Groetjes, Melissa
 *  Thread starter [joymedesign](https://nl.wordpress.org/support/users/joymedesign/)
 * (@joymedesign)
 * [14 jaren, 6 maanden geleden](https://nl.wordpress.org/support/topic/mouse-over/#post-33744)
 * Hi Melissa,
 * Dit werkt toch niet bij WordPress?
 * “background-image: url(land.jpg);” zou bij elke nieuwspost de featured image 
   moeten zijn.
 * “<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
    condimentum.
   In volutpat. Vestibulum elit. Aenean eget enim vitae tellus bibendum pellentesque.
   Sed at est. Example Text, Lorem ipsum dolor sit amet, consectetur adipiscing 
   elit. </span>” zou de tekst van een nieuwpost moeten zijn.
 * Groetjes,
 * Naomi
 *  Thread starter [joymedesign](https://nl.wordpress.org/support/users/joymedesign/)
 * (@joymedesign)
 * [14 jaren, 6 maanden geleden](https://nl.wordpress.org/support/topic/mouse-over/#post-33758)
 * Ik heb tot nu toe de tutorial goed kunnen instellen.
    We hebben alleen een probleempje
   met de background en de mouse-over van de tekst.
 * Background zou de thumbnail ( featured image ) moeten zijn.
 * Tekst moet pas zichtbaar zijn als je er met de muis over heen gaat.
 * Hoe kan ik dit nog aanpassen?
 * Alvast heel erg bedankt!
 * Naomi
 *  [Jaja..](https://nl.wordpress.org/support/users/jaja-1/)
 * (@jaja-1)
 * [14 jaren, 6 maanden geleden](https://nl.wordpress.org/support/topic/mouse-over/#post-33759)
 *     ```
       .featured-img {
            ...blaat...
       }
   
       .text {
             position: absolute; <-- ?? geen idee wat voor stijlen je allemaal hebt
             z-index: -5;  <-- belangrijk om hem achter de features image te zetten
       }
       .text:hover {
            z-index: 10;  <-- nu komt hij naar voren.
       }
       ```
   
 * Zoiets ongeveer?
 *  Thread starter [joymedesign](https://nl.wordpress.org/support/users/joymedesign/)
 * (@joymedesign)
 * [14 jaren, 6 maanden geleden](https://nl.wordpress.org/support/topic/mouse-over/#post-33760)
 * Het lukte nog steeds niet…
    Wat kan ik aanpassen / toevoegen om het te laten 
   werken?
 * Dit is de css code:
 *     ```
       .rollover_img {
       width: 184px;
       height: 184px;
       background-color:#66c011;
       font:13px normal Arial, Helvetica, sans-serif;
       float:left;
       margin:0 10px 20px 0;
       }
   
       .rollover_img a {
       color: #fff;
       width: 184px;
       height: 184px;
       display: block;
       text-decoration: none;
       }
   
       .rollover_img a:hover {
       background:#000;
       opacity:.60;
       filter:alpha(opacity=60);
       }
   
       .rollover_img a span {
       display: none;
       width: 184px;
       padding:184px;
       }
   
       .rollover_img a:hover span {
       display: block;
       }
   
       Deze code staat in loop.php:
       ```
   
 * <div class=”entry-content”>
    <div class=”rollover_img”> <?php the_post_thumbnail();?
   > <span><?php the_content( __( ‘Continue reading <span class=”meta-nav”>→</span
   >’, ’twentyten’ ) ); ?></span></div> <?php wp_link_pages( array( ‘before’ => ‘
   <div class=”page-link”>’ . __( ‘Pages:’, ’twentyten’ ), ‘after’ => ‘</div>’ ));?
   > </div><!– .entry-content –>`
 *  [robelia](https://nl.wordpress.org/support/users/robelia/)
 * (@robelia)
 * [14 jaren, 6 maanden geleden](https://nl.wordpress.org/support/topic/mouse-over/#post-33763)
 * [Bedoel je zoiets](http://www.teggelaar.com/romewp/test/)?
    Er is een mooie plugin
   voor Even zoeken bij Hover Image
 *  Thread starter [joymedesign](https://nl.wordpress.org/support/users/joymedesign/)
 * (@joymedesign)
 * [14 jaren, 6 maanden geleden](https://nl.wordpress.org/support/topic/mouse-over/#post-33768)
 * Hi Robelia,
 * Nee, het is de bedoeling dat er tekst verschijnt zodra je over de afbeelding 
   gaat… ( background wordt iets donkerder )
 * Groetjes,
 * Naomi
 *  [robelia](https://nl.wordpress.org/support/users/robelia/)
 * (@robelia)
 * [14 jaren, 6 maanden geleden](https://nl.wordpress.org/support/topic/mouse-over/#post-33771)
 * Heb je bij de plugins al op “hoover text” gezocht?
    Ze zijn er heb het eerder
   gebruikt maar weet even niet meer wanneer
 *  Thread starter [joymedesign](https://nl.wordpress.org/support/users/joymedesign/)
 * (@joymedesign)
 * [14 jaren, 6 maanden geleden](https://nl.wordpress.org/support/topic/mouse-over/#post-33774)
 * Ik heb tussen de plugins gezocht maar ik zie zo 123 niks wat in de buurt komt
   bij hetgeen wij zoeken.
 * Groetjes,
 * Naomi
 *  [Jaja..](https://nl.wordpress.org/support/users/jaja-1/)
 * (@jaja-1)
 * [14 jaren, 6 maanden geleden](https://nl.wordpress.org/support/topic/mouse-over/#post-33783)
 * Wat jij wilt is redelijk maatwerk en zoiets hoort ook niet via een plugin te 
   werken.
 * Maar ik denk dat je op deze website vast en zeker wel een tutorial kunt vinden
   voor wat je wilt.
    [http://css-tricks.com/](http://css-tricks.com/)
 * En dan het zoekvenster gebruiken op trefwoorden als, text + hoven + fade + background
   + Roll over en dat soort termen
 *  Thread starter [joymedesign](https://nl.wordpress.org/support/users/joymedesign/)
 * (@joymedesign)
 * [14 jaren, 6 maanden geleden](https://nl.wordpress.org/support/topic/mouse-over/#post-33798)
 * Ik heb nog steeds niks gevonden, wat het zou laten werken zoals wij willen…
 * Op deze ( [http://zync.ca/](http://zync.ca/) ) site gebruiken ze het ook.
 * Weet iemand wat ik moet aanpassen om het goed te krijgen in WordPress?
 * X Naomi
 *  [profenx12](https://nl.wordpress.org/support/users/profenx12/)
 * (@profenx12)
 * [14 jaren, 6 maanden geleden](https://nl.wordpress.org/support/topic/mouse-over/#post-33799)
 * De website die je aangeeft (zync.ca) maakt volgens mij gebruik van jQuery dus
   misschien heb je hier wat aan:
 * [http://www.onextrapixel.com/2009/04/28/jquery-jcarousel-lite-with-pretty-image-captions-that-appear-on-rollover/](http://www.onextrapixel.com/2009/04/28/jquery-jcarousel-lite-with-pretty-image-captions-that-appear-on-rollover/)
 * Het lijkt er namelijk aardig op, je moet dan alleen dat tekstvak dmv css denk
   ik wat aanpassen.
 * Hoe je dit in wordpress werkend krijgt kun je lezen op: [http://www.paddsolutions.com/how-to-integrate-jcarousel-to-wordpress-theme/](http://www.paddsolutions.com/how-to-integrate-jcarousel-to-wordpress-theme/)
 * misschien lukt het op deze manier?
 *  [robelia](https://nl.wordpress.org/support/users/robelia/)
 * (@robelia)
 * [14 jaren, 6 maanden geleden](https://nl.wordpress.org/support/topic/mouse-over/#post-33800)
 * Je kan het eenvoudig afkijken.
    Alles staat in de bron. [Dit is de CSS](http://arno.hoog.ma/likes/propaganda/css/propaganda/prop.screen.css)
 * En dit is de html van de mouseover.
 *     ```
       <div id="main" role="main">
   
       			<article>
   
       				<a href="websites/kinikek/">
   
       					<div>
       						<h1>Kinikek</h1>
       						<h2>Websites</h2>
       					</div>
   
       				</a>
   
       				<figure>
       					<img src="assets/image/screen-shot-20110512-at-090709.png" alt="Kinikek">
       				</figure>
   
       			</article>
   
       			<article>
   
       				<a href="huisstijlen/de-stad-bv/">
   
       					<div>
       						<h1>De Stad BV</h1>
       						<h2>Huisstijlen</h2>
       					</div>
   
       				</a>
   
       				<figure>
       					<img src="assets/image/screen-shot-20110512-at-091036.png" alt="De Stad BV">
       				</figure>
   
       			</article>
   
       			<article>
   
       				<a href="huisstijlen/saar/">
   
       					<div>
       						<h1>saar</h1>
       						<h2>Huisstijlen</h2>
       					</div>
   
       				</a>
   
       				<figure>
       					<img src="assets/image/saarportret.png" alt="saar">
       				</figure>
   
       			</article>
   
       		</div>
       ```
   
 *  Thread starter [joymedesign](https://nl.wordpress.org/support/users/joymedesign/)
 * (@joymedesign)
 * [14 jaren, 6 maanden geleden](https://nl.wordpress.org/support/topic/mouse-over/#post-33810)
 * Ik heb een nieuw thema geinstalleerd (hatch) waar het standaard bijna mogelijk
   is.
 * Hij laat de titel (entry-titel) van het nieuwsitem nu zien maar de tekst (content)
   zou ook te zien moeten zijn…
 * Hoe kan ik dit instellen?
    Hieronder een stuk code uit home.php:
 *     ```
       <div id="content">
   
       		<?php do_atomic( 'open_content' ); // hatch_open_content ?>
   
       		<div class="hfeed">
   
       			<?php if ( have_posts() ) : ?>
   
       				<?php $counter = 1; ?>
   
       				<?php while ( have_posts() ) : the_post(); ?>
   
       						<?php do_atomic( 'before_entry' ); // hatch_before_entry ?>
   
       						<?php if ( ( $counter % 4 ) == 0 ) { ?>
   
       							<div id="post-<?php the_ID(); ?>" class="<?php hybrid_entry_class(); ?> last">
   
       						<?php } else { ?>
   
       							<div id="post-<?php the_ID(); ?>" class="<?php hybrid_entry_class(); ?>">
   
       						<?php } ?>													
   
       								<?php do_atomic( 'open_entry' ); // hatch_open_entry ?>
   
       								<?php if ( current_theme_supports( 'get-the-image' ) ) {
   
       									get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'archive-thumbnail', 'image_class' => 'featured', 'width' => 220, 'height' => 150, 'default_image' => get_template_directory_uri() . '/images/archive_image_placeholder.png' ) );
   
       								} ?>					
   
       								<?php echo apply_atomic_shortcode( 'entry_title', '[entry-title]' ); ?>				
   
       								<?php do_atomic( 'close_entry' ); // hatch_close_entry ?>							
   
       							</div><!-- .hentry -->
   
       						<?php do_atomic( 'after_entry' ); // hatch_after_entry ?>
   
       					<?php $counter++; ?>
   
       				<?php endwhile; ?>
   
       			<?php else : ?>
   
       				<?php get_template_part( 'loop-error' ); // Loads the loop-error.php template. ?>
   
       			<?php endif; ?>
   
       		</div><!-- .hfeed -->
   
       		<?php do_atomic( 'close_content' ); // hatch_close_content ?>
   
       		<?php get_template_part( 'loop-nav' ); // Loads the loop-nav.php template. ?>
   
       	</div><!-- #content -->
       ```
   
 *  Thread starter [joymedesign](https://nl.wordpress.org/support/users/joymedesign/)
 * (@joymedesign)
 * [14 jaren, 5 maanden geleden](https://nl.wordpress.org/support/topic/mouse-over/#post-33811)
 * Ik ben er nog steeds niet helemaal uit…
    Kan iemand me helpen?
 * Groetjes,
 * Naomi

15 reacties aan het bekijken - 1 tot 15 (van in totaal 21)

1 [2](https://nl.wordpress.org/support/topic/mouse-over/page/2/?output_format=md)
[→](https://nl.wordpress.org/support/topic/mouse-over/page/2/?output_format=md)

 Het onderwerp ‘Mouse-Over’ is gesloten voor nieuwe reacties.

## Tags

 * [css](https://nl.wordpress.org/support/topic-tag/css/)
 * [hover](https://nl.wordpress.org/support/topic-tag/hover/)
 * [Image](https://nl.wordpress.org/support/topic-tag/image/)
 * [mouse over](https://nl.wordpress.org/support/topic-tag/mouse-over/)
 * [wordpress](https://nl.wordpress.org/support/topic-tag/wordpress/)

 * In: [Thema en CSS/opmaak](https://nl.wordpress.org/support/forum/themas-en-templates/)
 * 21 reacties
 * 6 deelnemers
 * Laatste antwoord van: [joymedesign](https://nl.wordpress.org/support/users/joymedesign/)
 * Laatste activiteit: [14 jaren, 5 maanden geleden](https://nl.wordpress.org/support/topic/mouse-over/page/2/#post-33818)
 * Status: onopgelost

## Onderwerpen

### Meest populaire onderwerpen

### Onderwerpen zonder reacties

### Non-support onderwerpen

### Opgeloste onderwerpen

### Onopgeloste onderwerpen

### Alle onderwerpen