• 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://www.buroreng.nl/nl/projecten/websites/

    De website waar het om gaat is: 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)
  • Hey!

    Misschien heb je iets aan deze tutorial:

    http://aceinfowayindia.com/blog/2010/02/how-to-create-simple-css-image-rollover-effect/

    Groetjes, Melissa

    Thread starter joymedesign

    (@joymedesign)

    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

    (@joymedesign)

    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

    .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

    (@joymedesign)

    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 –>`

    Bedoel je zoiets?
    Er is een mooie plugin voor
    Even zoeken bij
    Hover Image

    Thread starter joymedesign

    (@joymedesign)

    Hi Robelia,

    Nee, het is de bedoeling dat er tekst verschijnt zodra je over de afbeelding gaat… ( background wordt iets donkerder )

    Groetjes,

    Naomi

    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

    (@joymedesign)

    Ik heb tussen de plugins gezocht maar ik zie zo 123 niks wat in de buurt komt bij hetgeen wij zoeken.

    Groetjes,

    Naomi

    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/

    En dan het zoekvenster gebruiken op trefwoorden als, text + hoven + fade + background + Roll over en dat soort termen

    Thread starter joymedesign

    (@joymedesign)

    Ik heb nog steeds niks gevonden, wat het zou laten werken zoals wij willen…

    Op deze ( http://zync.ca/ ) site gebruiken ze het ook.

    Weet iemand wat ik moet aanpassen om het goed te krijgen in WordPress?

    X Naomi

    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/

    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/

    misschien lukt het op deze manier?

    Je kan het eenvoudig afkijken.
    Alles staat in de bron.
    Dit is de 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

    (@joymedesign)

    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

    (@joymedesign)

    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)
  • Het onderwerp ‘Mouse-Over’ is gesloten voor nieuwe reacties.