Good day, friends! This is another article written at the request of one of the readers of my blog. Today we will implement the ability to display an image when hovering the mouse cursor 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, to implement pop-up pictures possible with jQuery help, CSS, and also HTML. In today's article I will post finished code this effect, and also give a few good examples. Each script is quite simple, created using CSS+HTML. I will not torment you any longer and will give you ready-made solutions!
Popup image on hover
a.site-ssilka:hover+div
Let me briefly explain the main points. In order 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, after uploading it to root folder site.
Tag <а> with the obligatory href parameter is responsible for creating and displaying a 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 height. The parameters are set in pixels.
The alt attribute allows search engines to more accurately recognize what is shown in the image.
For clarity, I have highlighted the part of the code that you most likely want to change.
Popup text when hovering over a link
a.site-ssilka:hover+div
Bolder!!! Hover over me!
As you can see from the example, when you hover over the text, a text tooltip pops up.
Disappearing image when hovering over a link
a.site-ssilka:hover+div
Bolder!!! Hover over me!
To add a certain effect above, just copy the code that suits you and paste it into text editor. Thus, a link with a pop-up / disappearing image can be written anywhere in the article.
Important point! Each of the presented scripts does not harm the validity of the site.
I consider it no less convenient to implement the task by adding a special script to the style file of your template, which is usually called style.css.
CSS popup image
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 hovering over a link, insert the following link into the text:
In addition, a link with a pop-up image can be inserted into certain part 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.
In case you are not familiar with CSS, I will explain that the img.animate1:hover entry tells the browser that for all elements , with a class attribute equal to animate1, when hovering over them with the mouse cursor, apply the specified styles. And styles are specified between curly braces( and ). If everything is done correctly, it should look something like this:
You can take a picture in original state translucent, and when hovering over, make it non-transparent. Then you need to add the following lines to the CSS file:
img.animate1(
filter: alpha (Opacity=25);
opacity: 0.25
}
img.animate1:hover(
opacity: 1
}
The result will be like this:
For greater effect, you can slow down the changes in the transparency of the picture. To do this, you can use the CSS transition property, which sets the transition effect between two states of an element. For example, let's add one second of slowdown. Then our CSS code will look like this:
img.animate1(
filter: alpha (Opacity=25);
opacity: 0.25
-moz-transition: all 1s ease-in-out; /* transition effect for Firefox before version 16.0 */
-webkit-transition: all 1s ease-in-out; /* transition effect for Chrome up to version 26.0, Safari, Android and iOS */
-o-transition: all 1s ease-in-out; /* transition effect for Opera before version 12.10 */
transition: all 1s ease-in-out; /* transition effect for other browsers */
}
img.animate1:hover(
filter: alpha (Opacity=100);
opacity: 1
}
Result:
Using the transform property, the image can be scaled, rotated, shifted, tilted. Let's try to enlarge the picture. Then the css code will be like this:
img.animate1(
- o-transition: all 1s ease;
transition: all 1s ease;
}
img.animate1:hover(
- moz-transform: scale (1.5); /* transform effect for Firefox prior to version 16.0 */
- webkit-transform: scale (1.5); /* transform effect for Chrome up to version 26.0, Safari, Android and iOS */
- o-transform: scale (1.5); /* transform effect for Opera before version 12.10 */
- ms-transform: scale (1.5); /* transform effect for IE 9.0 */
transform:scale(1.5); /* transform effect for other browsers */
}
And the result will be like this:
Rotation can be added to enlarge the image. Then css styles change a bit:
img.animate1(
moz-transition: all 1s ease;
webkit-transition: all 1s ease;
- o-transition: all 1s ease;
transition: all 1s ease;
}
img.animate1:hover(
- moz-transform: rotate (360deg) scale (1.5);
- webkit-transform: rotate (360deg) scale (1.5);
- o-transform: rotate (360deg) scale (1.5);
- ms-transform: rotate (360deg) scale (1.5);
transform: rotate(360deg) scale(1.5);
}
Result:
Above, we considered cases when one picture is involved in the animation. Next, consider how to replace one image with another. In this case, two images of the same size are usually prepared: one for the original view, the other for its replacement.
Let's say we have two pictures, one black and white and the other color:
Let's make it so that when you hover over a black and white image, a color image is displayed. To do this, we will make the original image the background of the div element using the background property. And when you hover over the image of the cursor, we will change background picture using the same hover pseudo-class and background property. To implement this effect on html page add a div element with the rotate1 class:
And add the following style descriptions:
div.rotate1(
background: url (img/2.jpg); /* Path to the file with the original image */
width: 480px /* Width of the picture */
height: 360px; /* Image height */
}
div.rotate1:hover(
background: url (img/1.jpg); /* Path to the file with the replaced image */
}
And the result:
This method has one significant drawback. Since the second picture is loaded only when the cursor is hovered over, if the user has a slow Internet connection and the file size with the picture is large, the picture will be displayed with a pause. Therefore, below we will consider a few more ways to replace images when hovering the mouse cursor.
The next method will be based on combining two pictures into one file. Let's say we need to place a button on the page, which, when the mouse cursor is hovered over it, would change its appearance. To do this, we combine two images into one file and the resulting image will look something like this:
In this case, the change from one pattern to another will be carried out by shifting background image vertically using the background-position property. Since when you click on the button, you usually go to another page, we will insert the image into the element< a>. Then paste the following code into the html page:
And in a css file like this:
a.rotate2(
background: url (img/button.png); /* Path to the file with the original image */
display:block; /* Link as a block element */
width: 50px /* Image width in pixels */
height: 30px; /* Image height */
}
a.rotate2:hover(
background-position: 0-30px; /* Background offset */
}
Result:
And the last way for today is when one image is placed under another with css position: absolute rules. In this case, we put two images inside the div container:
And add css styles:
Animate2(
position:relative;
margin:0 auto;/* set the div block to the center of the page*/
width:480px; /* Width */
height: 360px; /* Height */
}
.animate2 img(
position:absolute; /* absolute positioning*/
left: 0; /* align images to the left top corner div-a*/
top: 0; /* align the images to the top left corner of the div */
}
After adding the css rules, the images will be placed one below the other. Now controlling the transparency of images with opacity properties in the normal state, we will show the second picture, and when you hover over the first one. To do this, in the normal state, we make the picture with the first class completely transparent, and when you hover the cursor, the opposite is true: the picture with the second class will be completely transparent, and with the first class it will not be transparent:
Animate2 img.first ( /* first image is fully transparent */
opacity:0;
filter:alpha (opacity=0);
}
.animate2:hover img.first ( /* the first image becomes opaque on hover */
opacity:1;
filter:alpha (opacity=100);
}
/* and the second one becomes transparent on hover */
opacity:0;
filter:alpha (opacity=0);
}
Result:
You can achieve a smooth transition by adding the CSS transition property to the last rule:
Animate2:hover img.second, .animate2 img.second:hover (
opacity:0;
filter:alpha (opacity=0);
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
And the result:
And if we add the transform property:
Animate2:hover img.second, .animate2 img.second:hover (
opacity:0;
filter:alpha (opacity=0);
-moz-transform:scale(0, 1);
-webkit-transform:scale(0, 1);
-o-transform:scale(0, 1);
-ms-transform:scale(0, 1);
transform:scale(0, 1); /* reduce image width to 0 */
}
It will turn out like this:
By combining different CSS properties, you can achieve different hover effects when changing images while hovering the mouse. I posted these and other examples on this page, where you can also download the source code. That's all, until we meet again.
| 18.02.2016
CSS3 opens up unlimited possibilities for UI designers, and the main advantage is that almost any idea can be easily implemented and brought to life without resorting to the use of JavaScript.
It's amazing how simple things can spice up an ordinary web page, making it more accessible to users. We are talking about CSS3 transitions, with which you can allow the element to transform and change the style, for example, on hover. The nine CSS3 animation examples below will help create a responsive experience on your site, as well as improve the overall look of the page with beautiful smooth transitions.
For more detailed information, you can download the archive with the files.
All effects work with the transition property. transition- "transition", "transformation") and a pseudo-class: hover , which determines the style of the element when the mouse cursor is hovered over it ( in our tutorial). For our examples, we used a 500x309 pixel div, an initial background color of #6d6d6d, and a transition duration of 0.3 seconds.
Body > div ( width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; transition: all 0.3s ease; )
1. Change color on hover
Once upon a time, the implementation of such an effect was quite painstaking work, with mathematical calculations of certain RGB values. Now it is enough to write down css style, in which you need to add the pseudo-class: hover to the selector and set the background color, which will smoothly (in 0.3 seconds) replace the original background color when you hover over the block:
Color:hover ( background:#53ea93; )
2. The appearance of the frame
An interesting and bright transformation is the inner frame that smoothly appears when you hover over the mouse. Good for decorating various buttons. To achieve this effect, we use the :hover pseudo-class and the box-shadow property with the inset parameter (sets the shadow inside the element). In addition, you will need to set the shadow stretch (in our case it is 23px) and its color:
Border:hover ( box-shadow: inset 0 0 0 23px #53ea93; )
3. Swing
This CSS animation is an exception, as the transition property is not used here. Instead, we used:
- @keyframes is a basic directive for creating a frame-by-frame CSS animation that allows you to do so-called. storyboard and describe the animation as a list of key points;
- animation and animation-iteration-count - properties for setting animation parameters (duration and speed) and the number of cycles (repetitions). In our case, repeat 1.
4. Decay
A fade effect is basically just changing the transparency of an element. The animation is created in two stages: first you need to set the initial transparency state to 1 - that is, full opacity, and then specify its value when you hover the mouse - 0.6:
Fade ( opacity: 1; ) .fade:hover ( opacity: 0.6; )
For the opposite result, swap the values:
5. Zoom
To make the box grow larger on hover, we will use the transform property and set its value to scale(1.2) . In this case, the block will increase by 20 percent while maintaining its proportions:
Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )
6. Reducing
Reducing an element is just as easy as increasing it. If in the fifth paragraph, to increase the scale, we needed to specify a value greater than 1, then to reduce the block, we simply specify a value that will be less than one, for example, scale(0.7) . Now, when hovering the mouse, the block will proportionally decrease by 30 percent of its original size:
Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )
7. Transformation into a circle
One commonly used animation is a rectangular element that transforms into a circle when hovered over. Using the property css border-radius, used in conjunction with :hover and transition , this can be implemented without problems:
Circle:hover ( border-radius: 70%; )
8. Rotation
A funny animation option is to rotate an element by a certain number of degrees. To do this, we again need the transform property, but with a different value - rotateZ(20deg) . With these parameters, the block will be rotated 20 degrees clockwise relative to the Z axis:
Rotate:hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )
9. 3D shadow
Designers disagree on whether this effect is appropriate in flat design. However, this CSS3 animation is quite original and is also used in web pages. We will achieve a three-dimensional effect using the box-shadow properties already familiar to us (it will create a multilayer shadow) and transform with the translateX (-7px) parameter (will ensure the block is shifted horizontally to the left by 7 pixels):
threed:hover ( box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: translateX( -7px); transform: translateX(-7px); )
Browser Support
The transition property is currently supported by the following browsers:
| Desktop browsers | |
|---|---|
| Internet Explorer | Supported by IE 10 and above |
| Chrome | Supported since version 26 (before version 25 works with -webkit- prefix) |
| Firefox | Supported since version 16 (in versions 4-15 works with -moz- prefix) |
| Opera | Supported since version 12.1 |
| safari | Supported since version 6.1 (in versions 3.1-6 it works with -webkit- prefix) |
The rest of the properties used in these examples, such as transform , box-shadow , etc., are also supported by almost all modern browsers. However, if you are going to use these ideas for your projects, we strongly recommend that you double-check cross-browser compatibility.
We hope these CSS3 animation examples have been helpful to you. We wish you creative success!
Before dealing with the buttons, let's look at the settings that are common to all of them.
HTML
For buttons will be used very simple html the code:
Subscribe
css
Also all buttons will have general settings for the inscription text and deselecting links:
ButtonText ( font: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; ) a ( color: #fff; text-decoration: none; )
Typically, the user expects a fairly mild effect when hovering the mouse over a link or button. And in our case, the button changes size - it increases, showing an additional message.
Main CSS Code
To begin, we only need to give the button a shape and a color. Define a height of 28px and a width of 115px, add margins and padding, and 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. AT 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. Here is a little dark gradient trick that works 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: -o-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)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
CSS Animation
Now let's install CSS transition. The animation will be used for any property changes and will last half a second.
Mouse hover
It remains only to add a style to expand the button when you hover over it with the mouse. The button needs to be 230px wide to display the entire post.
#button1:hover ( width: 230px; )
Easy color tone change
A very simple and popular CSS effect for a button. When you move the mouse cursor smoothly changes the tone of the background color.
Main CSS Code
The CSS code is very similar to the previous example. A different background color is used and the shape is slightly modified. The text is also centered and the line height for the button is set so that it is vertically centered.
#button2 ( background: #d11717; border: 2px solid #eee; height: 38px; width: 125px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 38px; )
CSS3 Effects
Set the rounding of the corners, the gradient for the background and the additional shadow. Using rgba we make the shadow black and transparent.
/*Rounded corners*/ -webkit-border-radius: 10px; -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)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-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)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*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); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS Animation
The animation is practically the same as the previous example.
/*Transition*/ -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease;
Mouse hover
When hovering the mouse cursor, a different background color will be set. Try choosing a lighter color option in Photoshop for a great effect.
#button2:hover ( background-color: #ff3434; )
This effect can be quite impressive depending on the choice of background image. The demo uses a nondescript background and the effect looks nondescript. Try using a different picture and you might end up with a stunning effect.
Main CSS Code
The main part of the code is the same as the previous examples. Note that we are using a background image. The initial position of the background is set to "0 0". When you hover over the cursor, the position shifts vertically.
#button3 ( background: #d11717 url("bkg-1.jpg"); background-position: 0 0; 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: center; line-height: 58px; )
CSS3 Effects
In this example, there is nothing special - rounded corners and shadows.
/*Rounded corners*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px /*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); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS Animation
The animation for this case is longer to create a smooth and interesting effect.
/*Transition*/ -webkit-transition: All 0.8s ease; -moz-transition: All 0.8s ease; -o-transition: All 0.8s ease; -ms-transition: All 0.8s ease; transition: All 0.8s ease;
Mouse hover
Now it's time to move the background image. The initial 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 simulated button press
The last example in our tutorial focuses on the popular 3D method of simulating a button click when you hover over it with the mouse. The animation for this case is so simple that it doesn't even require a CSS transition. But the end result is quite impressive.
Main CSS Code
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: center; line-height: 58px; )
CSS3 Effects
In this case, CSS3 is no longer a nice option. Shadows and a gradient are required to get the effect. The hard shadow creates the appearance of a 3D button.
/*Rounded corners*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*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: -o-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)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Mouse hover
In this case, we have the largest hover section. The length of the shadow is reduced and the margins create a blending of the dark zone. All together creates the illusion of pressing a button. Flipping the gradient enhances the effect.
#button4:hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4 )); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -ms-linear-gradient( bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); )