Search
Search Code
css cursor types testing
testing all (most) of the available css cursor types, you can mouse over to test how the cursors react depending on your browser type and operating system. refs https://developer.mozilla.org/e..
button zoom effect with expanding background
Just playing around with zoom and background size effects on a promo button, if you change the background to 110% and then zoom to 1.1 you can see how the background appears to zoom out while the butt..
down chevron and styles
a down chevron and the class to style it, default this is 16x16px but you can zoom it in or out easily, just change the height and width of it target with the class bi-chevron-down
ken burns slow image zoom
No i had never heard of Ken Burns either, but hey i like the zoom effects. Slow Zooom...
make the view number zoom when mouse over or active
Lets make the view number in the header widget area a bit more exciting... Zoom on mouse over with css. Lets add this effect here: Using Transform Scale In Css To Zoom On Hover Over Simpl..
center mode slick zoom testing
update : this is a tricky one to get working! I have done a lot of testing on this one, and got a demo working from a combination of the following links. the demo is still not 100% styled, but its..
CSS Drawing - Beach Scene
i did this one a while ago, cantr even remember it just appeared when i searched in google. here is an animated version, check the bottom for the css version of this:
zoom background of element when active
I just wanted to see if something like this zoom was possible but just using the background image and leaving the foreground content in the element with no zoom. https://kruxor.com/view/code/kM..
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..
css slow zoom in animation
give a bit of extra interest to otherwise static images
box shadow example(s) - drop shadow
I realised just now, that i dont have a box shadow example! How does that happen, its one of those css elements that i just use so much that i guess i forgot about it. Related Pages: https:/..
animate and zoom six elements on a timer [addClass, removeClass, setTimeout]
set of six elements that i wanted to highlight using a simple setTimeout and the addClass and removeClass this also involves some css changes to get this working i would also like in the fut..
Leaflet Quick Start Example
just a quick start map embed for leaflet js an alternative to google maps
stretching an image to fit in a banner image with gimp
sometimes i need to get a square image to fit in a rectangle box this is a way to do it with GIMP get a square image, or pick any image (pexels) fit it in this box.. For this one we will be using ..
using transform scale in css to zoom on hover over
using a css transform will not effect other elements that surround it, so when you mouse over this div (or press it on your phone/tablet) it should scale to 1.5 times its original size.
google map with overlay data
Ever wanted to add a really slightly complex google map to your site? Working Example /* Always set the map height explicitly to define the size of the div * element that con..
