css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

Posts tagged hover

Hover Effects CSS3 (Efectos Hover en CSS3)

Vamos a ver como se crea un efecto Hover (Mouse por encima) con CSS3. Este se aplicar√° a los objetos que contengan una clase llamada "cambiar". Necesitaremos utilizar dos archivos, un...

image hover

Image Hover

Image Hover Effect

Mobile Image

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, sed. Lorem ipsum dolor sit amet, consectetur...

Prepending <body> Classes to Nested Selectors with Sass Mixin

The Problem

It always feels a little hacky, but sometimes you need to control document-wide styles by adding a special class to the <body> element. A good example is a no-touch class, which...

How to Create Direction-Aware CSS-Only Hover Effects


A couple of tutorials for direction-aware CSS-only hover effects.


These tutorials are intended for people who have at least a basic knowledge of HTML and are proficient to...

Disable/remove/prevent hover support for touch devices with CSS @media queries

Some touch devices support hovering which can cause unwanted behaviour when working with responsive web apps that are accessed from both desktop and mobile devices and that are intended to behave...

Fixing the jitter bug

Situation: I wanted to have a card element shift up slightly when hovered over. Seemed simple enough: just apply a vertical translate on hover, right?

Sure. But if you happen to be pointing at the...