Templates html5 and css3. HTML5 templates. White - a wonderful one-page template

Very often on websites you might come across changes or buttons on hover. A special pseudo-class:hover in CSS allows you to implement the task. Today we’ll look at some techniques that allow us to make this trick, and below we’ll publish a list of the most interesting of them (with brief descriptions/explanations). We will divide all options into:

These groups are very arbitrary, because many examples overlap and are universal, that is, they can be found when designing different objects.

The hover effect in CSS styles is added to the right of the element as follows:

a: hover ( color : red ; )

a:hover ( color: red; )

Most often, the mechanism is used specifically for links in order to change their color or add/remove underlining. However, it can also be specified for other blocks, buttons, texts, or used when creating.

button : hover ( background : rgba (0 , 0 , 0 , 0 ) ; color : red ; .my-picture : hover ( opacity : 0.5 ; filter : alpha(opacity= 50 ) ; )

button:hover ( background: rgba(0,0,0,0); color: red; ) .my-picture:hover ( opacity: 0.5; filter: alpha(opacity=50); )

Modern browsers equally correctly perceive the CSS hover effect on hover, although in older versions of IE 6 and below it only works for links. Plus, some sources said that this must be specified in the code.

By the way, when setting link styles, selectors can also be additionally used: link - for pages that have not yet been visited, :visited - for those where you have already been + :active determines the currently active address. It's important to place the hover effect in the CSS after :link and :visited if they exist.

Let's move from theory to practice. Below is a list of useful materials and snippets - follow the links to view the sources.

Hover effects for buttons and links

As we said above, this is the most popular category of objects on the site where this technique is found. Here are some options on the topic.

Simple examples for buttons

Sullivan Buttons

The trick is that when you hover over different buttons, in addition to changing the background color, a small animation with icons (each with its own) is also launched.

CSS Icons on Hover

A selection of 5 simple options for implementing the task. In all cases, additional icons are used that appear to the right/left of the text or replace it.

Button Hover Effects

Compared to the previous example, these 12 trigger functions look much more interesting: both visually and in terms of code. Not without JS.

Nav Hovers

Several features that allow you to do something more unusual than with the basic text-decoration property. The button background is additionally filled with various visual effects.

Info on Hover

Tooltips functionality is currently supported in all browsers, but you can customize it to suit your needs. In the current example, the pseudo-class is triggered for the dfn tag, which looks stylish. The code is quite compact HTML + CSS.

Mana Button

One of the most original variants of the hover effect in blocks - when hovering, it is like filling it with liquid. The implementation uses CSS, HTML and SVG. For certain website topics, this snippet will definitely be a godsend.

Hover effects for images

15 basic techniques

Despite the fact that the article was published quite a long time ago, the methods still work correctly. Here, probably, all possible standard transformations for graphics are collected: several types of zoom, rotation, blur, b/w, transparency, filters, shine, etc. Very useful material.

Beautiful hover effects images

A selection of 30 pleasant and smooth actions when hovering over a picture. Due to simple visual manipulations in the form of zoom and adding lines, a good complex impression is created. In some places the title is enlarged and the short description is tightened. Great option for a portfolio.

Barberpole Hover Animation

The animation is not complicated at first glance, but in the end it looks very cool and unusual.

CSS hover effects with direction detection

An excellent selection of snippets and codes on the topic can be found in the article from css-tricks.com. All these examples are united by the fact that the location and direction of cursor movement is determined during operation. This, in turn, allows you to create quite original reactions when hovering over page elements:

In many complex solutions, Javascript and jQuery for hover effects can significantly diversify and improve the result.

Direction Aware Hover Goodness

Direction Aware Tiles using clip-path Pure CSS

Find the rest of the tricks in the original article.

Animatism

This development includes more than 100 simple ways to “animate” images or objects on hover. Using these functions, you can implement different appearances of buttons, headings, texts, social icons, etc. There are options with changing the display of pictures and translucent background overlays.

The link contains 7 CSS3 hover header effects - when hovering over an image, the user will see an information block with a title, a short description and a link to navigate. This is not to say that the examples are very original, but they will definitely help diversify a static content project.

CSS Hover libraries

Hover.css

The project, simply named Hover.css, contains a collection of CSS3 effects for links, buttons, blocks, etc. You can use ready-made code and/or add your own modifications to it. There is a lot of interesting stuff here: 2D/3D transformations, working with backgrounds and frames, shadows, icons. The solution is available in CSS, LESS and Sass formats.

Imagehover.css

Another library that sets hover effects for pictures - in the free version you will find 44 transformation options (the premium set contains 5 times more). LESS and SCSS are also supported here, this file weighs only 19kb. The site has a page demonstrating all working examples. There are many unique features that have not been seen above.

The project includes more than 30 different techniques for round and square objects. All of them are quite original; there are practically no simple “single-element” actions in the form of a regular zoom/fly out. The task was implemented using pure CSS3 + HTML (plus Scss files included). Excellent compatibility with Bootstrap 3, documentation available.

Total. We hope these css hover effects when hovering over images, blocks, links and other page elements helped you understand this topic. You can implement the most successful solutions, in your opinion, on your websites - be it connecting a full-fledged library or simply integrating a small version of the code.

If you know any other interesting features and snippets, send URLs to them in the comments. And we will supplement the article in the future.

Before we look at the buttons, let’s look at the settings common to all of them.

HTML

The buttons will use very simple HTML code:

CSS

Also, all buttons will have common settings for the caption text and deselect links:

ButtonText ( font: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; ) a ( color: #fff; text-decoration: none; )

Typically, the user expects a fairly soft effect when hovering the mouse over a link or button. And in our case, the button changes size - it increases, showing an additional message.

Basic CSS Code

To begin with, we only need to give the button a shape and color. Define a height of 28px and a width of 115px, add margins and padding, and also give the button a light border.

#button1 ( background: #6292c2; border: 2px solid #eee; height: 28px; width: 115px; margin: 50px 0 0 50px; padding: 0 0 0 7px; overflow: hidden; display: block; )

CSS3 Effects

Some people like it when a simple button is accompanied by quite a lot of CSS code. This section provides additional CSS3 styles for our button. You can do without them, but they give the button a more modern look.

Round the corners of the frame and add a gradient. This uses a little trick with a dark gradient that interacts with any background color.

/*Rounded corners*/ -webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

/Gradient/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

CSS Animation

Now let's set up the CSS transition. The animation will be used for any property changes and will last half a second.

Mouse over

CSS3 Effects

All that remains is to add a style to expand the button when you hover the mouse over it. The button must be 230px wide to display the entire message.

/*Rounded corners*/ -webkit-border-radius: 10px;

-moz-border-radius: 15px;

-moz-border-radius: 10px;

border-radius: 10px;

/Gradient/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

/*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

CSS Animation

background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

CSS3 Effects

/*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

-moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

-moz-border-radius: 15px;

box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

The animation is practically no different from the previous example.

/Gradient/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

Now it's time to move the background image. The starting position was "0 0". Set the second parameter to 150px. To shift horizontally, you need to change the first parameter.

#button3:hover ( background-position: 0px 150px; )

3D button press simulation

The last example in our lesson is about the popular 3D method of simulating a button press when hovering the mouse cursor over it. The animation for this case is so simple that it doesn't even require a CSS transition. But the end result is quite impressive.

CSS Animation

The CSS code for our button.

#button4 ( background: #5c5c5c; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; height: 58px; width: 155px; margin: 50px 0 0 50px; overflow: hidden ; display: block; text-align: line-height: 58px;

CSS3 Effects

In this case, CSS3 ceases to be a nice option. To achieve the effect, shadows and a gradient are required. A sharp shadow creates the appearance of a 3D button.

/*Rounded corners*/ -webkit-border-radius: 5px;

/Gradient/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

-moz-border-radius: 5px;

border-radius: 5px;

Good day, friends! This is another article written at the request of one of my blog readers. Today we are implementing the ability to display an image when you hover your mouse over a link. Why might this be necessary? Everything is very simple, in this way you can save space on the site and at the same time revive the links.

As you know, implement pop up pictures you can use jQuery, CSS, and HTML. In today's article I will post the finished code for this effect, and also give several visual examples. Each script is quite simple, created using CSS+HTML. I won’t bore you any longer and will give you ready-made solutions!

Pop-up image on hover

When you hover over text, hidden graphic content is displayed

a.site-ssilka:hover+div

Let me briefly explain the main points. To display a pop-up image, you need to refer to the tag with the src attribute and after the equal sign in quotes, write the path to the image, having first uploaded it to the root folder of the site.

Tag <а> with the required parameter href is responsible for creating and displaying the link (in my example this is text).

If the site elements have moved, you can set the width and height of the image using the property width And heigh. Parameters are specified in pixels.

The alt attribute allows search engines to more accurately recognize what is being depicted in an image.

For greater clarity, I have highlighted the part of the code that you most likely want to change.

Pop-up text when hovering over a link

When you hover over the text, a text tooltip appears

a.site-ssilka:hover+div

Be brave!!! Point your cursor at me!

Great!!! Everything worked out:)

As you can see from the example, when you hover over the text, a text tooltip pops up.

Image disappears when hovering over a link

When you hover over the text, the image disappears

a.site-ssilka:hover+div

Be brave!!! Point your cursor at me!

To add a specific effect above, just copy the code that suits you and paste it into a text editor. Thus, a link with a pop-up/disappearing image can be added anywhere in the article.

Important point! Each of the presented scripts does not harm the validity of the site.

I find it no less convenient to implement the task by adding a special script to the styles file of your template, which is usually called style.css.

Popup Image CSS

position: relative;

Thumbnail:hover(

Thumbnail span( /*CSS for enlarged image*/

position: absolute;

background-color: #3d3d3d;

border: 1px solid white;

visibility: hidden;

text-decoration: none;

border-radius: 4px 4px 4px 4px;

Moz-border-radius: 4px 4px 4px 4px;

Webkit-border-radius: 4px 4px 4px 4px;

Thumbnail span img( /*CSS for enlarged image*/

border-width: 0;

Thumbnail:hover span( /*CSS for enlarged image on hover*/

visibility: visible;

left: 60px; /*position where enlarged image should offset horizontally */

To display a pop-up window when you hover over a link, insert the following link into the text:

In addition, a link with a pop-up image can be inserted into a specific part of your template. To do this, add the following code to the index.php file. This is a file that defines the visual arrangement of site elements.