Hey there, I’m a beginner at using ACF but I have to create a Function:
It has to be a repeater because I need to be able to add People every time.
It is supposed to be a Picture and when you hover it, it’s text (not a description) should appear. When I create it without beeing a repeater it works perfectly, but as a repeater it doesn’t. The hover on the picture does not work, so the text also does not appear.
<?php if (have_rows('add_person')): ?>
<ul class="img_list">
<?php while(have_rows('add_person')) : the_row();
$image = get_sub_field('image');
$imagetext = get_sub_field('image_text');
?>
<li>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" class="shadow" width="300" height="300"/>
<span class="text-content"><span> <?php echo ($imagetext); ?> </span></span>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
What am I doing wrong?
These are my styles
.shadow {
webkit-box-shadow: 10px 10px 10px grey;
moz-box-shadow: 10px 10px 50px grey;
box-shadow: 10px 10px 50px grey;
border-radius: 25px;
}
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
list-style-type: none;
display: inline-block;
height: 300px;
margin: 0 1em 1em 0;
position: relative;
width: 300px;
max-width: 350px;
max-height: 350px;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
display: table;
height: 300px;
left: 0;
position: absolute;
top: 0;
width: 300px;
opacity: 0;
webkit-transition: opacity 200ms;
moz-transition: opacity 200ms;
o-transition: opacity 200ms;
transition: opacity 200ms;
border-radius: 25px;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
If you remove the styles does the content of the field appear on the page?
@John
Yes it does, it appears as normal text below the picture.
Even though I just copied the styles from the one that was working (without the repeater) it does not work anymore. When I try to search for the text it appears on the top left and it is invisible and when I try to hover it, it does not show anything; so the hover does not work, too.
If the content is displaying without the styles then that’s about the most I can help you with. This is more of a CSS question and while I know CSS, this is not the proper forum for you to get the answer. You might want to try asking your question over at http://stackoverflow.com/ where you’re likely to find CSS experts that can help.
Okay I will ask there for help.
Thanks for helping!
Update:
It really was a problem with the stylesheet. WordPress kinda did not read the style.css properly.
