placecage | https : //www.placecage.com https : //www.fillmurray.com

I would like to know if there is a more cleaner/efficient way to make this fiddle https://jsfiddle.net/L53e840z/4/. The issue with this is that that if if the window is made smaller or bigger there is this white space in between the images because it's dependent on it parent width. To make it work the parent is also set to an oddly specific 'vw' measurement that breaks if the arrangement is changed, I wanted it the images to stay proportional with 100% height of window with no whitespace and the parent to automatically adjust it's width to cover all child elements. I'm new to web dev and want to know the best practice to work with images.

What I made explained -> It's a container within which there is a parent element inside that there is a wrapper set to flex. Inside that wrapper are 6 image wrappers - inside each of these are 2 images set to absolute so they overlap one another. On hover, the front image fades and reveals the back.

HTML

Trying to center a div inside an image with flexbox (I only want flexbox), but since img does not have closing tag, I cannot make it work. How to do?

I have an html slideshow which I got off of CodePen. It's called Vanilla JS Slideshow w/ CSS fade transition.

It works perfectly when alone, however on my homepage it cycles thru all images on that page. The images are controlled by a small Javascript function centered around the following call.

This is probably a really simple answer, but it's frustrating me. I have a flex container with 2 items side-by-side; there is an image for one, and content for the other side. In the content, it is centered both horizentally and vertically, but the content is stacked pretty tightly on top of each other (title, text, button). Is there a way to have them evenly spaced around the height of the card?

How to style the scrollbar of a slider that you see horizontally at the bottom? It is a big question and I have not solution. What am I missing? I have to put more text here why?

I have a simple flex container with 2 items; an image and the other is a small piece of descriptive text.

I'd like the image to grow and be as responsive as possible, but I also want there to be a max-height in place to avoid it growing too much. This causes a gap when the max-height is reached and the screen expands even further in width.

Is there a way to only have the container item fill the image as it grows so there are no gaps, or perhaps align the image to the left or the right side of the screen (self-align didn't appear to work)? I'm not sure what the answer to this is.

I have a setTimeout inside the a for loop, but it not behaving as i anticipated.

I have a bunch of banners in a page that are loading all at once. I am removing their parent's div html and storing it in an array. Then I would like for each parent to receive its corresponding html every 5 seconds. This only needs to happen once on ready state.

Here's my code...

So I've got this slider, and I want to hide its controls if it only has one element inside it.

Markup:

I am trying to clone a particular div inside an html file through AJAX and then to a PHP file that would create a new html file with the newly cloned content and save the save it in a temp directory.

My ultimate goal to generate this temp file that I would extract its url and email it to a client. Eventually (after X amount of days), the file would be deleted.

But this is still thinking way ahead... the issue I am running into is that when i click the SEND button, it seems to cycle through the AJAX ok, but doesn't seem to ever hit the PHP file. Here is what I have so far.