I am using the Wordpress theme "Photos"
It generates thumbnails for posts on the home page using featured images. Thumbnails fade on hover, but no post title is displayed. http://www.hardeepasrani.com/demo/photos/
.photogrid-item img.featured-image:hover {
opacity: 0.2;
}
I have found numerous wordpress plugins and numerous examples online of how to accomplish thumbnail hover captions, but the wordpress plugins affect the feature images accompanying posts rather than the thumbnails on the home page, and the online examples are simple html/css whereas I believe this theme needs me to put it in the content.php file.
<div id="post-<?php the_ID(); ?>" <?php post_class('photogrid-item'); ?>>
<a class="photogrid-link" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php if ( has_post_thumbnail() ) : ?>
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<img class="featured-image" src="<?php echo $feat_image; ?>" />
<?php else: ?>
<?php $feat_image = get_stylesheet_directory_uri() . '/assets/images/default.jpg'; ?>
<img class="featured-image" src="<?php echo $feat_image; ?>" />
<?php endif; ?>
</a>
</div>
w3schools has a nice, simple example, but it overlays predefined text ("Hello World") https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
How can I integrate this so that it will display the corresponding post title to every thumbnail?
--------------UPDATE---------------
Using developerme's answer, I got most of the way there. But hovering over any of the thumbnails made the overlays show up for all of the thumbnails. For some reason this was fixed by editing the CSS from
.container:hover .overlay {
opacity: 1;
}
to:
.overlay:hover {
opacity: 1;
}
I have no idea why, but that seems to do the trick.
<style>
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.overlay:hover {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
</style>
<div id="post-<?php the_ID(); ?>" <?php post_class('photogrid-item'); ?>>
<a class="photogrid-link" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php if ( has_post_thumbnail() ) : ?>
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<img class="featured-image" src="<?php echo $feat_image; ?>" />
<div class="overlay">
<div class="text"><?php the_title(); ?></div>
</div>
<?php else: ?>
<?php $feat_image = get_stylesheet_directory_uri() . '/assets/images/default.jpg'; ?>
<img class="featured-image" src="<?php echo $feat_image; ?>" />
<?php endif; ?>
</a>
</div>
Could You Please try Following code with the css.You change the css with your own needs.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.overlay:hover {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ) : ?>
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<img alt="Avatar" class="image"> src="<?php echo $feat_image; ?>" />
<?php else: ?>
<?php $feat_image = get_stylesheet_directory_uri() . '/assets/images/default.jpg'; ?>
<img alt="Avatar" class="image">src="<?php echo $feat_image; ?>" />
<?php endif; ?>
<div class="overlay">
<div class="text"><?php the_title(); ?></div>
</div>
</a>
</div>
</body>
</html>
The majority of browsers will display the image title on hover. Assuming that your theme adds the title to the code (the HTML will look something like <img src='image.jpg' title='my great image' />) then all you need to so is go through the images in your media library and make sure that the title field is filled in.
Hope that helps
Related
I'm writing here today because I need some help to insert different class into a foreach loop.
CURRENT SITUATION
I have a foreach loop like this one:
<?php
$propertyImages = get_field('property_images');
if( $propertyImages ):
?>
<div class="container">
<?php foreach( $propertyImages as $propertyImage ): ?>
<a class="gallery-item href="<?php echo esc_url($propertyImage['url']); ?>">
<img class="gallery-img" src="<?php echo esc_url($propertyImage['sizes']['medium']); ?>"/>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
DESIRED SITUATION
With this loop I want to display the images in a grid pattern that loops itself (like the one you can see in the images below.
I think that to achieve this I need to add a "grid-lg-img" for the first 2 element of the loop then add a "grid-sm-img" for the 3rd 4th 5th items of the loop and then again and again with the same 2-3-2-3-... pattern.
Is it possible to craft a solution like this? Or maybe I'm looking in the wrong direction?
Thank you.
You can use only CSS.
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
a.gallery-item {
display: block;
}
a.gallery-item:nth-child(5n+1) {
flex: 1 50%;
}
a.gallery-item:nth-child(5n+2) {
flex: 1 50%;
}
a.gallery-item:nth-child(5n+3),
a.gallery-item:nth-child(5n+4)
a.gallery-item:nth-child(5n+5) {
flex: 1 33,333333336%;
}
a.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
You can do this easily with CSS grid.
If you make the grid a total number of columns which is divisible by the amount of actual columns you want in both your 'large' and 'small' size, then you can just target those first two elements and make them span however many columns you'd like.
So, here you want your large images to be half width, and the smaller ones will be one third width. 6 is divisible by both 2 and 3, so your half width images can be 3 of 6 available columns, and your third width images can be 2 of 6.
html,
body {
min-height: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.gallery {
max-width: 75%;
padding: 1.5em;
background: #f2f2f2;
display: grid;
gap: .5em;
grid-template-columns: repeat(6, 1fr);
}
.gallery__item:nth-of-type(1),
.gallery__item:nth-of-type(2) {
grid-column: span 3;
}
.gallery__item {
width: 100%;
grid-column: span 2;
}
<html lang="en">
<head></head>
<body>
<div class="gallery">
<img class="gallery__item" src="https://unsplash.it/300/200/?random" />
<img class="gallery__item" src="https://unsplash.it/300/200/?random" />
<img class="gallery__item" src="https://unsplash.it/300/200/?random" />
<img class="gallery__item" src="https://unsplash.it/300/200/?random" />
<img class="gallery__item" src="https://unsplash.it/300/200/?random" />
<img class="gallery__item" src="https://unsplash.it/300/200/?random" />
<img class="gallery__item" src="https://unsplash.it/300/200/?random" />
<img class="gallery__item" src="https://unsplash.it/300/200/?random" />
</div>
</body>
</html>
Further reading on grid here.
you can wrap it all with while
<?php
$propertyImages = get_field('property_images');
while($propertyImages) : $i =0;
if( $propertyImages ):
?>
<div class="container">
<?php foreach( $propertyImages as $propertyImage ): ++$i; ?>
<a class="gallery-item-<?php echo $i?> href="<?php echo esc_url($propertyImage['url']); ?>">
<img class="gallery-img" src="<?php echo esc_url($propertyImage['sizes']['medium']); ?>"/>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php endwhile; ?>
I have this css script generated using php, it's used to show a wordpress second featured image when an user hover. The problem is that the images are blinking and I don't know how to solve this small issue. Can anyone suggest a fix for this? I've implemented the lazyload, but on this case it's unuseful.
<div class="box">
<?php $id = get_the_ID(); ?>
<div class="rounded-circle" style="background-image:url('<?php the_post_thumbnail_url('full'); ?>')" id="staff-pic-<?php echo $id; ?>"></div>
<?php if(class_exists('MultiPostThumbnails')):
$hover_pic = MultiPostThumbnails::get_post_thumbnail_url(get_post_type(),'secondary-image');
endif;
echo
'<style>
#staff-pic-'.$id.'{
background-size: cover;
background-position: center;
margin: auto;
transition: all 300ms;
}
#staff-pic-'.$id.':hover{
transition: all 300ms;
background-image:url("'.$hover_pic.'") !important;
background-size: cover;
background-position: center;
margin: auto;
}
</style>';
?>
<h3 class="text-center team-name"><?php the_title(); ?></h3>
<p class="description text-center"><?php the_content(); ?></p>
</div>
I'm trying to display 2 different content in a modal box using featherlight.js. It's very simple :
If there is an 'image', it displays the 'image', otherwise if there is a 'soundcloud url', it displays a 'soundcloud url' iframe.
But it doesn't work!
Here is my website
And here is the code
<div id="post">
<a href="#" data-featherlight="#featherlight">
<div class="img">
<div class="art-overlay">
<div class="small">
<img src="<?php echo get_template_directory_uri(); ?>/images/skuar_small.png" alt="skuar" />
</div>
</div>
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('post-thumbnails');
}
?>
<?php
if( get_field( 'image' ) ) { ?>
<?php the_field( 'image' ); ?>
<?php }
else { ?>
<iframe width="600" height="166" scrolling="no" class="lightbox" class="frame" id="featherlight" frameborder="no" src="https://w.soundcloud.com/player/?url=<?php the_field( 'music' ); ?>&color=1b1e25&theme_color=1b1e25&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
<?php endif; ?><?php } ?>
</div>
</a>
</div>
If you have a look now, using featherlight.js it works : skuar.com
Just because I removed the overlay on thumbnails!
Is there any way to add this very simple overlay?
<div class="art-overlay">
<div class="small">
<img src="<?php echo get_template_directory_uri(); ?>/images/skuar_small.png" alt="skuar" />
</div>
.art-overlay {
display: flex;
background: rgba(0,0,0,0.2);
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
-webkit-transition: opacity 300ms;
transition: opacity 300ms;
.small {
margin: auto;
width: 59px;
height: 75px;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
}
#post:hover .art-overlay {
opacity: 1;
cursor: pointer;
}
I have a sequence of 5 user images that I am stacking horizontally using a z-index. i.e: <img src="xxxx" style="z-index:5;position:relative;"> and then z-index 4...3..etc.
I now want to link these images to the user's 'profile'. If I surround my <img> with an <a> it breaks the formatting. It just shows the images in a line (with the z-indexes still correct(!?)) instead of overlapped. I tried just <img> and also <img> but nothing has worked.
<?php $count = 5; ?>
<?php foreach($today_all_result as $today_all_results) : ?>
<a href="<?php echo BASE_URI; ?>/user/?user=<?php echo $today_all_results->user_id; ?>" style="position:relative;z-index:<?php echo $count; ?>">
<img src='<?php echo BASE_URI; ?>/images/userImages/<?php echo $today_all_results->userPicture; ?>' class="pic-athlete <?php echo $stacked; ?>" style="z-index:<?php echo $count; ?>;position:relative;">
</a>
<?php $count--; ?>
<?php $stacked = "stacked"; ?>
<?php if($count <= 0) break; ?>
<?php endforeach; ?>
Does anyone know how to fix this? Thank you in advance!
Change the style from position: relative; to position: absolute;
img{
height: 100px;
width: 100px;
position: absolute;
}
<img src="" style="background-color: blue; z-index: 10;"/>
<img src="" style="background-color: green; z-index: 2;"/>
<img src="" style="background-color: red; z-index: 3;"/>
Another example:
img{
height: 100px;
width: 100px;
position: absolute;
}
<img src="" style="background-color: blue; z-index: 1;"/>
<img src="" style="background-color: green; z-index: 2; left: 20px; top: 20px;"/>
<img src="" style="background-color: red; z-index: 3;left: 40px; top: 40px;"/>
I'm doing an about page. I've got each person's photo set to absolute inside of a relative positioned div. The absolute positioned div contains two photos layered on top of each other, and when you hover, the alternate photo of the person will appear. The relative positioned div also contains the name and email of the person.
It's also fluid. So I've got width of the relative div set to 100%, and the images are sizing fluidly with the browser. My problem is that the height stays the same, and I can't get it to respond with the browser. I've tried setting the height to 100%, but that's not the trick.
Any help is greatly appreciated!
Here's my html:
<section class="team clearfix">
<?php
$custom_query = new WP_Query( array( 'post_type' => 'team', 'orderby' => 'title', 'order' => 'ASC' ));
while($custom_query->have_posts()) : $custom_query->the_post(); ?>
<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<div class="inner">
<div class="image-container">
<?php
$image2 = get_field('alt_photo');
if( $image2 ): ?>
<img class="bottom" src="<?php echo $image2['url']; ?>" alt="<?php echo $image2['alt']; ?>" title="<?php echo $image2['alt']; ?>">
<?php endif; ?>
<?php
$image = get_field('main_photo');
if( $image ): ?>
<img class="top" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" title="<?php echo $image['alt']; ?>">
<?php endif; ?>
</div>
<div class="entry-summary">
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php
if(get_field('email')) { ?>
email
<?php } ?>
</div>
<?php //the_content(); ?>
</div>
</article>
<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query ?>
</section>
& my css:
section.team .image-container {
position: relative;
margin: 0 auto;
width: 100%;
height: 512px;
}
section.team .image-container img{
position: absolute;
left:0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
section.team .image-container img.top:hover{
opacity:0;
}
section.team {
padding: 30px 0;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
section.team .hentry {
float: left;
position: relative;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
}
section.team .hentry .entry-summary {
min-height: 50px;
}
section.team .hentry .entry-summary .entry-title {
font-family:'Avenir LT W02 95 Black', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: .75em; /* 12px */
line-height: 1em; /* 14px */
letter-spacing: .2em;
margin-bottom: 0;
text-transform: uppercase;
}
section.team a {
font-size: 12px;
}
Have you tried max-height at all? Try max-height:100% and see if that works also please create a jsfiddle so we can help you faster