On-hover effects: the gallery

In any situation, when you need to smoothly change the position or size of a block or to modify something about its external appearance using whatever available method, you have a choice: use the transition + transform combination or use Javascript to dynamically change the width/height and object coordinates in the script.

Often, the choice will be in favor of making such changes in Javascript using the jQuery library, but in most cases you can create simple visual effects using just pure CSS, and it is much more powerful than similar jQuery functions. In addition, in some cases, certain transforms in CSS may not only utilize the CPU of the computer or mobile device, but also the resources of the graphics card, which makes it possible to offload tasks from the processor and get rid of effect “lag” in order to improve performance.

In this assignment, let’s utilize transforms and smooth transitions to create a simple mini-gallery of images that enlarge and become semi-transparent when the user hovers the mouse over them.