Forum Replies Created
-
Posts
-
Hi Devin, thanks for your reply.
I almost have it working perfectly using this css
.image-overlay.overlay-type-extern .image-overlay-inside { content: url(https://kristinadunn.co.uk/wp-content/uploads/2014/04/KristinaOverlay.png); top: 0px; left: 0px; width: 100%; }The only problem is I cant change the overlay for each image. Would there be a way to add to the class of the overlay, something like the title to be able to distinguish them.
Would you mind taking a quick look at the site? I am so close! – http://goo.gl/NjMxBI
Thanks v much
After many hours I finally came across something which works! I have one image which is a photo, and another image which is a photo with an overlay with some text. When hovering over the image, it switches to the other one.
I have added some text with the code for the image, and changed the js file by adding some code (below).
https://kriesi.at/support/topic/custom-css-hover-on-alb-image-element/
Does anybody know a way I could add to this code a slow fade in / out between images?
$(function() { $('img[data-hover]').hover(function() { $(this) .attr('tmp', $(this).attr('src')) .attr('src', $(this).attr('data-hover')) .attr('data-hover', $(this).attr('tmp')) .removeAttr('tmp'); }).each(function() { $('<img />').attr('src', $(this).attr('data-hover')) });; });What about a function similar to this?
I am new to wordpress themes, but I thought this could be a start.
Thank you
function writeOverLay($atts, $content) { extract(shortcode_atts(array("image" => '', "alt" => '', "title" => ''), $atts)); $output; $output .= '<div style="overflow:auto" >'; $output .= '<div class="full_overlay">'; $output .= '<div class="overlay_content">'; $output .= $content; $output .= '</div>'; $output .= '<img style="display: block;" src="'. $image. '" alt="'. htmlspecialchars($alt).'" title="'.htmlspecialchars($title).'">'; $output .= '</div>'; $output .= '</div>'; return $output; }I’ve had an idea which I think could work but I need some help.
Would it be possible to add to the page below an image, a Div and the description for image, something like below?
‘<div class=”overlay-background>
<p>
(The description from the image here)
</p>
</div>
Thanks
Is there anyway I could add the Div below an image? And change the heading and description text for different images?
If I can figure out how to achieve that I may be able to do what I was after. Thank you
<img src="http://mywebsite/a-picture.jpg" alt="Title Here" /> <div class=”overlay-background> <h3>Title Here</h3> <p>A description here</p> </div>Thanks Yigit, I just changed my post before you replied! Would it be possible to do something similar to what happens when you hover over the photos on this site?
http://www.prophoto.com/explore-examples/
Thanks v much
