I want to create an image that overlays either my entire page, an element on the page, or overlaps several elements. What is the preferred/best way to manipulate an overlay? See my attachment showing a coffee cup overlay in several positions and sizes… I hope this can be done.
You could do this with a transparent .png or an .svg, an absolute positioned div, and the z-index rule. The sizing and rotation are easily accomplished with CSS transforms. The only tricky thing is if you need to the page to be responsive, you may need to make a few version of the div, and hide/show them with media queries. I’ve done something like this in a recent website. You can see it here. The client’s logo sits in a div above the Bootstrap carousel.
Yup… that’ll work. Thanks for the how-to.
Really nice site, BTW. Can I ask how you did the roll-over actions for the cards? I like that effect.
Thanks Randy. The box divs have black backgrounds. The image div is nested within the box div, and when you hover over the box, it changes the image div opacity. The same thing makes the heading div change size, except I use a 90% scale transform. I also use a CSS transition to make the effect happen over .3 seconds, so it’s not an abrupt change. Then the whole thing is wrapped in a link.
You might’ve helped to create a monster…
I liked the site you pointed me to, especially your hover affects, so I sat down last night and created a mimic-site where I tried to replicate that effect. This is the first time I’ve done this using CSS & think I’ve come close to yours. Visit: https://www.statecollegedev.com/webfx - let me know what you think?
The hover effect looks good. I never thought about using filters. The only issue I see with yours is that you’re placing the images as backgrounds, and at different screen sizes, they’re becoming distorted.
Here’s another site where I’ve used a similar effect, if you want to check it out.
http://heartandsoulcenter.com/
I’m a bit confused by the above… the images are placed via an “img” tag:
… how should I have placed the images in the div’s so the aspect ratio is maintained? Is this done by CSS?
Okay, sorry I was mistaken. I just took a closer look and I see you placed them as images, but you gave them a fixed height (150 px) which is why they’re distorting at different sizes. The inline CSS is confusing to look through. I’ll look into this with more detail later this evening.
I’m trying to “fix” the images so they don’t stretch with the viewport… I think the in-lines need to be deleted to let the Style.css take over. I’ll post again when I’ve got this resolved. Meanwhile, thanks again for your help and sharing.
Monday I got the aspect issue resolved and have been ‘playing’ with other CSS filters (made a somewhat annoying banner for the homepage). I’ve been trying to find a CSS that will alternate images but have temporarily settled on using a carousel to rotate text instead.
@Printninja - have you found a way to rotate (swap or alternate) images using CSS?
have you found a way to rotate (swap or alternate) images using CSS?
Try doing a Google search for “pure CSS slider”
I did a quick look and found this one that rotates text. There are many CSS only sliders out there.
Regarding buttons with rollover effects, here’s a new design that I just created for a client.
Ahhh… “slider” is the keyword to use. Thanks. Again.
And again, what another great site… love the action affects on a site that promotes action.