Sample code for CSS image animation effects (photo frame)

This article introduces the sample code of CSS picture animation effects (photo frame) and shares it with you. The details are as follows:

The following is the effect picture

HTML Code

<!-- Main container -->
<div class="box">

    <!-- Image -->
    <img src="images/pic.png" alt=""/>

    <!-- Contents -->
    <div class="box-inner-content">
        <h3 class="title">Rabbit</h3>
    <span class="post">Web Developer</span>
    </div>

</div>

CSS Code

/* Initialization */
body,
html {
    font-size: 100%;
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    background: #494A5F;
    font-weight: 500;
    font-size: 1.05em;
    font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}

/* Outer container */
.box {
    margin: 100px auto;
    width: 400px;
    height: 400px;
    overflow: hidden;
    position: relative;
}
.box:before {
    content: "";
    display: block;
    border: 30px solid rgba(255, 255, 255, 0.3);
    position: absolute;
    top: 5px;
    left: 5px;
    bottom: 5px;
    right: 5px;
    opacity: 1;
    z-index: 2;
    transition: all 0.3s ease 0s;
}
.box:hover:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 10px solid rgba(255, 255, 255, 0.18);
}
.box:after {
    content: "";
    display: block;
    border: 8px solid #fff;
    position: absolute;
    top: 35px;
    left: 35px;
    bottom: 35px;
    right: 35px;
    opacity: 1;
    z-index: 1;
    transition: all 0.5s ease 0s;
}
.box:hover:after {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
}

/* picture*/
.box img {
    width: 100%;
    height: auto;
    transform: scale(1.2);
    transition: all 0.5s ease 0s;
}
.box:hover img {
    transform: scale(1);
}

/* Text content*/
.box .box-inner-content {
    position: absolute;
    left: 45px;
    bottom: 125px;
    right: 45px;
    text-align: center;
    color: #fff;
    opacity: 0;
    transition: all 0.3s ease 0s;
}
.box:hover .box-inner-content {
    opacity: 1;
    bottom: 20px;
    text-shadow: 0 0 10px #000;
}

/* Title */
.box .title {
    font-size: 26px;
    font-weight: bold;
    margin: 0;
}

/* text*/
.box .post{
    display: block;
    font-size: 16px;
    font-style: italic;
    margin-bottom: 10px;
}

Pixels are used here to set the size of the container. If you use a framework such as bootstrap, you can set it to be responsive.

Because the image is set to 100%, it will adapt to the size of the outer container.

It should be noted that the position of the outer container must be set to relative.

The CSS3 transition property is mainly used. I haven’t set any browser prefixes here, and most browsers are now compatible with this property. If you are worried and don't mind the trouble, it is best to add the prefixes of each browser.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: How to avoid data loop conflicts when MySQL is configured with dual masters

>>: Some tips on deep optimization to improve website access speed