Home > Article > Web Front-end > When the mouse moves over the picture, how to use css to add a border effect to the picture?

When the mouse moves over the picture, how to use css to add a border effect to the picture?

藏色散人Original: 2018-08-10 13:35:453389browse

This article will introduce to you how to use CSS to add borders to pictures. When building a website, the special effect of adding borders to CSS pictures is generally to highlight product pictures or pointing pictures. This also has the possibility of making users want to click. desire. In fact, as for the problem of how to add borders to CSS images, many solutions can be found by just searching on the Internet. But today I will show you how to add borders with CSS using the simplest code. Hope it helps those who are interested.

The specific code example for adding borders to css images is as follows:

<!DOCTYPE HTML>
<html>
<head>
    <title>css图片加边框代码测试</title>
    <meta charset="UTF-8">
    <style type="text/css">
        body{background: #ffffff;color:#06c;}
        em{ font-style:inherit;}
        img{background:white;margin:0 5px;width:70px;height:70px;}
        img:hover{border:1px red solid;}
        .demo2 img{border:1px solid transparent;}
        .demo2 img:hover{border:1px red solid;}
        .demo3 img:hover{width:68px;height:68px;border:1px solid yellow;}
    </style>
</head>
<body>
<div>
    <img  src="1.png" / alt="When the mouse moves over the picture, how to use css to add a border effect to the picture?" >
    <img  src="1.png" / alt="When the mouse moves over the picture, how to use css to add a border effect to the picture?" >
    <img  src="1.png" / alt="When the mouse moves over the picture, how to use css to add a border effect to the picture?" >
    <img  src="1.png" / alt="When the mouse moves over the picture, how to use css to add a border effect to the picture?" >
    <em>这里可以明显看到当img标签在hover的时候由于出现边框导致位移</em>
</div>
<div>
    <img  src="2.png" / alt="When the mouse moves over the picture, how to use css to add a border effect to the picture?" >
    <img  src="2.png" / alt="When the mouse moves over the picture, how to use css to add a border effect to the picture?" >
    <img  src="2.png" / alt="When the mouse moves over the picture, how to use css to add a border effect to the picture?" >
    <img  src="2.png" / alt="When the mouse moves over the picture, how to use css to add a border effect to the picture?" >
    <em>在这里给每个img添加border:1px solid transparent;</em>
</div>
<div>
    <img  src="1.png" / alt="When the mouse moves over the picture, how to use css to add a border effect to the picture?" >
    <img  src="1.png" / alt="When the mouse moves over the picture, how to use css to add a border effect to the picture?" >
    <img  src="1.png" / alt="When the mouse moves over the picture, how to use css to add a border effect to the picture?" >
    <img  src="1.png" / alt="When the mouse moves over the picture, how to use css to add a border effect to the picture?" >
    <em>在这里修改width和height</em>
</div>
</body>
</html>

The test effect of the above code is as follows:

When the mouse moves over the picture, how to use css to add a border effect to the picture?

Note: The :hover selector is used to select the element on which the mouse pointer is floating.

Tip: The :hover selector can be used on all elements, not just links.

Tips: The :link selector sets the style of links pointing to pages that have not been visited, the :visited selector is used to set links to pages that have been visited, and the :active selector is used for active links.

Note: In the CSS definition, :hover must be placed after :link and :visited (if present) for the style to take effect.

This article introduces in detail how to add borders to CSS images. I hope it will be helpful to friends in need.

The above is the detailed content of When the mouse moves over the picture, how to use css to add a border effect to the picture?. For more information, please follow other related articles on the PHP Chinese website!

css 指针选择器

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS display attribute: Layout is implemented through the inline-block attribute valueNext article：CSS display attribute: Layout is implemented through the inline-block attribute value

See more

When the mouse moves over the picture, how to use css to add a border effect to the picture?

Related articles