Search
Search Code
Search Code by entering your search text above.
css
make an image or element grayscale switch on mouse over

mouse over the image to see the effect also used: transitions random image

2:21 am, April 26, 2024
css
CSS Object Fit for Image fill rather than using background image on a div

CSS Object Fit can crop off the sides of an image, while also preserving its aspect ratio, and then fill in the space to fit any size.  Object Fit You can use: object-fit: With the following ..

3:47 am, February 23, 2024
image formatting
can you set all image heights to match with css no stretching

Short Answer: Yes with object-fit: cover; on the css of the image properties.  object-fit: cover; You might also need:  object-position: right bottom; ..

4:32 am, November 9, 2022
html
pulse map dots

bunch of pulsing dots for a map or image. allows overlaying of clickable dots on an image, you can change the colors with the css below.  modified from here: e.g: 

12:14 am, November 8, 2022
sections
slick slider section quick add

everything you need for a quick slide section

10:52 pm, November 7, 2022
sections
Images
Auto Changing Image URL

Here is a picsum url that you can use to generate image sizes, just change the numbers in the url to change its generated size.  Some examples of the sizes you can use are below. 

1:31 am, May 1, 2022
images
center image preview with lightbox and caption

I just wanted a thumbnail or preview of the image, where if clicked it would load into a lightbox, but the preview just shows the center of whatever image is added to it.  Note: I just picked ra..

2:54 am, January 12, 2022
javascript
add new random image with button

this appends a new random image from picsum.photos to the div with the id app

10:56 pm, December 30, 2021
react
How to Use PropTypes to Define Props in React

React allows you to define the types of props given to your components to make sure that invalid data is not sent as the prop to the element.  To do this you can define propTypes. You can defin..

4:40 am, October 19, 2021
apps
change photoshop to show px rather than pt

if your photoshop is showing pt when you select font sizes, you can change this in the settings.  in the Edit menu go into Preferences and then Units and Rulers then you can change both uni..

2:11 am, April 7, 2021
css
adding background blur to an image using css fill screen

I had noticed this cool looking effect used on places like google, and other sites that display portrait images, i think i saw it on the google home as well or maybe google photos.  Its basicall..

5:23 am, February 19, 2021
bat
xcopy backup full directory windows bat

xcopy /y/s/e/d/c/k/r d:\photos\*.* h:\photos

10:33 pm, October 24, 2018
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote

'Dawnie' used to say, "It's really quite simple: Be kind, and the rest takes care of itself. Never do anything that's not kind".


Dawn Atherton
Random CSS Property

::backdrop

The ::backdrop CSS pseudo-element is a box the size of the viewport which is rendered immediately beneath any element being presented in fullscreen mode. This includes both elements which have been placed in fullscreen mode using the Fullscreen API and <dialog> elements.
::backdrop css reference