Develop Reference

using CSS content & :after to show a <span> inside an image

I am working on an image gallery inside a web template, similar to this link. now currently when i click on an image it will be shown inside a jquery slider. but i need the image inside the slider to show the span defined inside the markup <span><strong>Project name:</strong><em>villa2</em></span>, where each image will have the following markup :-
<li>
<figure><img src="http://livedemo00.template-help.com/wt_47767/img/page3_img1.jpg" alt=""><span><strong>Project name:</strong><em>villa2</em></span></figure>
</li>
so i define the following inside my css file:-
#gallerySlider .placeholder:after {
content: "test";
color: yellow;
font-size: 36px;
font-family: arial;
position: relative;
display: block;
height: 20px;
width: 200px;
z-Index: 1;
bottom: 42px;
text-align: right;
margin: -8px;
}
which will show the following :-
where i was able to add the text "test " inside the slider. but can anyone adivce how i can do these 2 modifications:-
1) instead of showing a static text inside the slider using the following css:-
#gallerySlider .placeholder:after {
content: "test";
how i can force the CSS content , to show the <span><strong>Project name:</strong><em>villa2</em></span> which is related to the rendered image ?
2) how i can move the content to be below the image instead of being on the left ?
Thanks
EDIT
now after many tests and modifications i did the following modification to the loadImage callback function inside the Touchtouch script :-
function loadImage(src, callback){
var img = $('<img>').on('load', function(){
callback.call(img);
});
img.attr('src', src);
// get all the captions (should probably be done with variable referring to something about above selector)
var allcaptions = $("figure span");
// setTimeout is a hack here, since the ".placeholders" don't exist yet
//setTimeout(function () {
$(".placeholder").each(function (i) {
// in each .placeholder, copy its caption's mark-up into it (remove the img first)
var caption = allcaptions.eq(i).clone();
// caption.find("img").remove();
$(this).append("<div class='caption'>" + caption.html() + "</div>");
});
// }, 500
//);
}
this seems to show the span as follow:-
but i am facing two problems:-
First Problem as shown on the above picture the text will be shown twice , specifically when i click on the next and previous arrows, here is the built-in code for the next & prevoise arrows :-
function showNext(){
// If this is not the last image
if(index+1 < items.length){
index++;
offsetSlider(index);
preload(index+1);
}
else{
// Trigger the spring animation
slider.addClass('rightSpring');
setTimeout(function(){
slider.removeClass('rightSpring');
},500);
}
}
function showPrevious(){
// If this is not the first image
if(index>0){
index--;
offsetSlider(index);
preload(index-1);
}
else{
// Trigger the spring animation
slider.addClass('leftSpring');
setTimeout(function(){
slider.removeClass('leftSpring');
},500);
}
}
Second problem. is that as i click on next & previous arrows the image will keep loosing its position and after many next & previous i will end up having the image on the following position at the bottom of the page:-
so can anyone adivce how i can fix these 2 issues ?

Pseudoelements :after and :before make possible to add an element into the html flow with just css... but that's it. An element which can be text, shapes, images (using css instructions as content:url('image.png'), etc. But you can't add html in the content:of the pseudoelement (as logn as I know).
You could use simple jquery as:
$(".placeholder").after("<span class="your-class-to-style"><strong>Project name:</strong><em>villa2</em></span>");
But if you have control of the html I would just include the span there.
(note: :after and:before follow the html flow so to reposition them you need to use position:absolute not forgetting to add relative to the parent)

Well, if you check the sources, you will see they are using the TouchTouch jQuery plugin (a little bit outdated by the way). Since the plugin doesn't have options or callbacks, you will have to do this manually. The key is in the following line:
loadImage(items.eq(index).attr('href'), function(){
placeholders.eq(index).html(this);
});
So, even if you add the texts with jQuery, the plugin will remove it from the placeholder and add only the image.

Javascript Slideshow Last Image Appearing Quickly at Start of Show

I have created a 4-image fading slideshow. When the page loads, the last image flashes quickly before the first image appears. I tried using a blank image at the end as suggested in a post on this site, but that had no effect. I also tried putting the first slide in the last position as well which removes the flashing image at start, but then the last image appears for twice as long. Is there a way to keep this from happening without having to duplicate the first slide?
$(document).ready(function() {
$("#photos img:gt(0)").hide();
setInterval(function() {
var current = $('#photos img:visible');
var next = current.next().length ? current.next() : $('#photos img:eq(0)');
//hide the current image
current.fadeOut(2000);
//show the next one
next.fadeIn(2000);
}, 5000);
});

I figured it out. I needed to hide all the images except the first one. When I hid only one, another one would appear instead, but it was so quick I thought it was the same one. Now it's working fine.

You'll need to hide the image with css, this way it hidden before the js has loaded, something like this:
//css
#photos img:last-child {
display: none;
}
Just an idea...
Edit from your comments.
#photos img {
display: none;
}
#photos img:first-child {
display: block;
}

Changing div background a different times of day

I'm quite new at this, so I'm sorry if there is an obvious answer.
I'm trying to get a photo on my homepage to change depending on the time of day. I have found tons of information on changing the background of the website, but I want to change an image on my homepage, not the background of the body tag.
I tried following the information here: Changing background based on time of day (using javascript) and in one of the comments someone suggested changing the class instead of the image so that you could change other things besides just the background image.
I tried to follow that advice, but it's not working.
This is what my breakfast-lunch.js file says:
var currentTime = new Date().getHours();
if (6 <= currentTime && currentTime < 12) {
if (document.body) {
document.body.className = "breakfast";
}
}
else {
if (document.body) {
document.body.className = "lunch";
}
}
I have the following css:
.breakfast .home-photo {
background-image: url('images/Maddie-Lab-Studio-Home-Page.jpg');
background-size: 100%;
width: 100%;
height: 0;
padding-top: 61%;
text-indent: -9999px;}
.lunch .home-photo {
background-image: url('images/Miriam-Joy-Photo-Home-Page.jpg');
background-size: 100%;
width: 100%;
height: 0;
padding-top: 61%;
text-indent: -9999px;}
Before I tried doing this with JS and having it change the class name, I had just this CSS and it worked great, put a photo in the div and looked fine:
.home-photo {
background-image: url('images/Maddie-Lab-Studio-Home-Page.jpg');
background-size: 100%;
width: 100%;
height: 0;
padding-top: 61%;
text-indent: -9999px;}
In case it's relevant, my site is a WordPress site.
I'm at a loss. Any help would be greatly appreciated. You can find an example of my (not working properly) website at http://www.canvas.kgshultz.com
Thanks in advance!

FIX will be CSS side, javascript is fine(just checked in console.log)
change this:
.breakfast .home-photo {
}
to this:
.breakfast, .home-photo {
}
Comma (,) is missing between classes.
here is a FIDDLE

After checking your website, I noticed that manually setting the classes breakfast or lunch on your body makes everything work as expected (the images appear respectively for each class name). This leads me to think that your CSS is actually just fine, bringing the problem onto the JS
Your JS may be fine too, but i couldn't find it anywhere on this website you mentionned and the body had no trace of either breakfast or lunch classes. When i tried running it manually, it worked fine too. So please check that this script is actually used.
You should however be careful with what you are doing with those lines:
document.body.className = "breakfast";
and
document.body.className = "lunch";
as they will completely overwrite any existing classes on your body. And since you are using a CMS, your body ends up having plenty of classes.
Please consider using this line instead:
document.body.className += " breakfast";
It will concatenate the string breakfast (mind the leading space so two different classes don't end up sticked to each other) at the end of its current value.

Crossfading Background Images

I am trying to crossfade and cycle through a series of 5 images which is a full screen background image.
I am applying the following css class to body.
body {
display: table;
margin:0px;
height:100%;
background-image:url('images/image1.jpg') ;
background-size: 1500px auto;
-webkit-font-smoothing: subpixel-antialiased !important;
}
I would like to replace background-image with the next image in sequence i.e. images/image2.jpg, images/image3.jpg, every 8 seconds, with the prior image fading out and the new image fading in, and being able to control the speed of fading.
I was wondering what the best way is to go about doing this. I tried using Jquery Cycle but it didn't fit my needs since this is a full-screen background image.
This link was the most helpful so far.
http://css3.bradshawenterprises.com/cfimg/#cfimg1

images = ["https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png",
"https://i.kinja-img.com/gawker-media/image/upload/s--XkYSDzxz--/c_scale,fl_progressive,q_80,w_800/hflvykipmc5g22mc3m0m.jpg",
"https://vignette2.wikia.nocookie.net/symbolism/images/4/43/Orange.png/revision/latest?cb=20140818120046",
"https://vignette4.wikia.nocookie.net/joke-battles/images/0/0e/Green.jpg/revision/latest?cb=20170111231844"];
// These are just placeholder images, replace the URLs with anything you desire.
bgNum = 0;
setInterval(changeBackground,5000); // Change to the number of milliseconds desired between frame changes
changeBackground();
function changeBackground() {
c = document.getElementById('bgContainer');
c.removeChild(c.childNodes[0]);
bg2 = document.createElement('img');
bg2.src = images[bgNum];
bg2.classList.add('bg');
bg2.style.opacity = '0';
bg2.onload = setTimeout(changeOpacity,100); // For some reason, updating the opacity does not work immediately after inserting the element
c.appendChild(bg2);
bgNum++;
bgNum %= images.length; // Reset image counter
}
function changeOpacity() {
c = document.getElementById('bgContainer');
c.childNodes[0].style.opacity = '0';
c.childNodes[1].style.opacity = '1';
}
#bgContainer img {
transition: opacity 1.5s;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -2;
}
<div id='bgContainer'><img><img></div>
test text
I could not find any way to replicate this using background-image, but I believe this replicates the behavior you are looking forward to. In order to use it, simply change the interval time and image list, as necessary.
I attempted this by having only two images on the page at a time, stacked on top of each other. However, I believe that having all images together at once and alternating opacity values may be cleaner and remove the need for the setTimeout() call. Oddly, calling console.log() also works instead of setting a delay, but it clutters the console if left running for a long period of time.

Change background based on time and scale to browser window

So I'm looking to change the background of my webpage based on time. That is, one image for day and one image for night. There is a really good post I found on this site that works perfectly but I need it to do one more thing, scale the image with the browser window and not scroll with the page.
The code I found for changing the background is
</body>
<script type="text/javascript">
var currentTime = new Date().getHours();
if(5 < currentTime && currentTime < 18){
if (document.body) {
document.body.background = 'images/bg-day.png';
}
} else {
if (document.body) {
document.body.background = 'images/bg-night.png';
}
}
</script>
</html>
but I would like the images to scale with the browser window and stay fixed when scrolling so just my content scrolls.
like this
http://css-tricks.com/examples/FullPageBackgroundImage/css-2.php
At the moment I've got the full page background working fine but I would like it to change at night.
If someone could figure this out I would be forever in your debt.
Thanks

In your example page, you'll see that they put the background image in a div named bg and not document.body.background as in your time script. They then then set that div's css in the style tag at the top of the source. (Right-click and "View Source".)
So if you want to mimic your example, create a div in your body like so:
<body>
<div id="bg">
<img id="my-bg-image" src="images/bg-day.png" alt="">
</div>
</body>
Then make sure that div has the scaling CSS that you want. A good place to start is, again, the example page:
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
And then, using a little jQuery magic (simply to make it easier), modify your time if statement to something like this:
if(5 < currentTime && currentTime < 18){
$('#my-bg-image').attr('src', 'images/bg-day.png');
} else {
$('#my-bg-image').attr('src', 'images/bg-night.png');
}
Don't forget to include jQuery if you decide to use it.

Just set the background to fixed, that has nothing to do with javascript.Add this to your CSS styling:
body {
background-attachment: fixed;
}