Support

Account

Home Forums General Issues Creating an image link with a hover overlay

Solved

Creating an image link with a hover overlay

  • I have been working on this an just can’t get it to work. I have created this Codepen and am using the same markup. I am recreating it in Acf except on the actual site I’m putting them in with grid instead of flexbox, I have the grid part working, but when I add the markup for the link overlay and link text – it breaks.

    Here’s the codepen: https://codepen.io/fourwhitesocks/pen/WNbWWNr I’m just having issues with the hover link overlay working with ACF

    ** this is a Genesis site so the code is a function hooked into the Content

    Here’s my code so far, ANY help appreciated! What do you guys think? It has to be something with the php because when coded up statically (is that a word) even in WordPress it works…..

    add_action( 'genesis_entry_content', 'bbb_gallery_fields' );
    
    function bbb_gallery_fields() {
    
       if ( have_rows( 'add_an_album' ) ) : ?>
       
       <?php while ( have_rows( 'add_an_album' ) ) : the_row(); ?>
            <div class="slide slide-top">
            <div class="slide-content">
            <a class="slide-link" href="<?php the_sub_field( 'link_to_album' ); ?>">
                
            <?php $album_thumbnail = get_sub_field( 'album_thumbnail' ); ?>
    		<?php if ( $album_thumbnail ) { ?>
    			<?php echo wp_get_attachment_image( $album_thumbnail, 'one-fourth' ); ?>
    		<?php } ?> View Album</a>
            </div>  
           
                <h2><?php the_sub_field( 'album_title' ); ?></h2>
                </div>
           
            <?php endwhile; ?>
        <?php else : ?>
            <?php // no rows found ?>
        <?php endif; 
    
    }
  • I forgot to add this: here is what it looks like now when the first one on the left is hovered with mouse; the image is like only somehow only half as tall as it should be and the link text is missing and the Heading tag with the name of the trip is somehow being pushed behind it..

    See: When first one on the left is on hover

  • I finally fixed this and just had some stuff in the wrong order. Working code:

    add_action( 'genesis_entry_content', 'bbb_gallery_fields' );
    
    function bbb_gallery_fields() {
    
       if ( have_rows( 'add_an_album' ) ) : ?>
       
       <?php while ( have_rows( 'add_an_album' ) ) : the_row(); ?>
       <div class="album-card">
            <div class="slide slide-top">
            <div class="slide-content"><a class="slide-link" href="<?php the_sub_field( 'link_to_album' ); ?>">View Album</a> </div>
                
            <?php $album_thumbnail = get_sub_field( 'album_thumbnail' ); ?>
    		
    			<?php echo wp_get_attachment_image( $album_thumbnail, 'one-fourth' ); ?>
                </div>
               
                <h2><?php the_sub_field( 'album_title' ); ?></h2>
                </div>          
                                   
            <?php endwhile; ?>
        <?php else : ?>
            <?php // no rows found ?>
        <?php endif; 
    
    }
Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Creating an image link with a hover overlay’ is closed to new replies.