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>
Related
I am displaying some icons and a short descriptor for each. I am using a list item to display the descriptions because I have a custom icon I am using to accompany the descriptor.
The icons display as expected, but as you can see the second row of descriptions is shifted right, not aligned with the row above (sorry the icons are so dark), I can't seem to debug why. All the properties seem to be the same.
<?php if( have_rows('section') ): ?>
<?php while( have_rows('section') ): the_row();
$image = get_sub_field('image');
?>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="mx-auto text-center">
<img src="<?php echo $image['url'] ?>">
<ul>
<li><?php the_sub_field('content'); ?></li>
</ul>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
And how I'm styling the list
ul {
padding-left: 2rem;
list-style-type: none;
list-style-position: outside;
}
ul li {
padding-left: 2rem;
background-image: URL("../../images/star.svg");
background-position: 0 0;
background-size: 1.6rem 1.6rem;
background-repeat: no-repeat;
margin-top: 1rem;
margin-bottom: 50px;
display: inline-block;
text-align:left;
}
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
I'm having difficulty adding a class to a wordpress element. I want to add the object-fit: cover element to a Wordpress function, but I'm running into a wall.
<!-- Row -->
<article class="col-4">
<?php the_post_thumbnail('category-thumbnail'); ?>
</article>
I'm attempting to directly add the object-fit:cover to the img through CSS, but it doesn't effect it. Totally confused because its being effected by the width: 100% and height: auto.
.col-4 img{
width: 100%;
height: auto;
object-fit: cover;
}
I've tried taking the width and auto off and just having the object-fit: cover, but it still doesn't take effect on the page.
Thanks in advance for your help.
Use
.col-4 img{
width: 100%;
height: 200px; // height should be mentioned so that image can cover that place
object-fit: cover; // Image will fill the 200px space
}
For object-fit: cover, the height should be mentioned so that the image can cover that height.
I would recommend you to use background image rather than object-fit cover. Please check http://caniuse.com/#feat=object-fit for compatibility with other browsers.
Source on how to use background size cover
https://css-tricks.com/perfect-full-page-background-image/
You can use background-image or simply make the image width: 100%
1. Using background-image
You have to set the height of the image or Maintain the aspect ratio of a div with CSS
.article-photo {
display: block;
width: 100%;
}
<article class="col-4">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="article-photo" style="background-image: url('<?php the_post_thumbnail_url('full'); ?>')">
</a>
<?php endif; ?>
</article>
2. Image with width: 100%
.article-photo {
display: block;
width: 100%;
}
.article-photo img {
display: block;
width: 100%;
}
<article class="col-4">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="article-photo">
<?php the_post_thumbnail('category-thumbnail'); ?>
</a>
<?php endif; ?>
</article>
i'm new with jQuery !
i have a CSS file named "Slider.css" that contains the following code :
.banner1 {
/*background: url(../images/bnr1.jpg) no-repeat 0px 0px;*/
background-size: cover;
min-height: 650px;
}
.banner2 {
/* background: url(../images/bnr2.jpg) no-repeat 0px 0px;*/
background-size: cover;
min-height: 650px;
}
.banner3 {
/* background: url(../images/bnr3.jpg) no-repeat 0px 0px;*/
background-size: cover;
min-height: 650px;
}
what i want is to change the url of the background in page called home.ctp according to data that i get from database so i tried this :
<?php $i=1; ?>
<?php foreach ($query as $slider): ?> // query contain 3 items
<div class="slid banner<?= $i; ?>">
<div class="caption">
<h3><?= $slider->titre; ?></h3>
<p><?= $slider->contenue; ?></p>
know more
</div>
</div>
<script>
// alert(".banner<?= $i; ?>");
$(".banner<?= $i; ?>").css({"background": "url(../images/<?= $slider->url ?>) no-repeat 0px 0px;"})
</script>
<?php $i++; ?>;
<?php endforeach; ?>
So i tried $(".banner<?= $i; ?>").css({"background": "url(../images/<?= $slider->url ?>) no-repeat 0px 0px;"}) but it doesn't change anythnig..
How can i change the css of Slider.css from php Loop using jQuery !
Thanks for help
Basically, you're doing it wrong. You don't need and shouldn't be using jQuery for this.
This is what you want:
.banner {
background-size: cover;
min-height: 650px;
}
<?php foreach ($query as $slider): ?>// query contain 3 items
<div class="slid banner" style="background: url(../images/<?= $slider->url ?>) no-repeat 0px 0px;">
<div class="caption">
<h3><?= $slider->titre; ?></h3>
<p>
<?=$ slider->contenue; ?></p>
know more
</div>
</div>
<?php endforeach; ?>
You don't need jQuery to achieve this. If $slider->url contains the URL of your background image, just do:
<?php $i = 1; foreach ($query as $slider): ?>
<div class="slid banner<?php echo $i; ?>" style="background-image: url(<?php echo $slider->url; ?>)">
// ...
</div>
<?php $i++; endforeach; ?>
Indeed, your CSS already defines the background image, you shouldn't even need this. Just the <div class="slid banner<?echo $i; ?>"> does the trick.
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