Applying the css style moves the image to the next line.

http://livedf.dothome.co.kr/sub1.html

It's this homepage.

jsfiddle.net/zjzn83xv

This is a snippet.

If you hover the fourth image in the submenu, the images in the next row will move on to the next row.

.page_title {text-align: center; font-size:1.4em; line-height: 90px; background:#eee; border-top:1px solid #ddd; border:1px solid #eee; }
.page_wrap {width: 80%; margin: 0 auto; padding-top: 20px; height: auto;}
.span3 {width: 22%; float: left; position: relative; margin-right: 2%; }

.span3:nth-child(4), .span3:nth-child(8) {margin-right: 0; }
.span3 a {display: block; text-align: center; box-sizing:border-box; border:30px solid #000; border-color:transparent;}
.span3 a:hover {box-sizing: border-box; border:1px solid #000; }
.span3 a img {display: block; width: 70%; height:70%; margin: 0 auto;}
.pro_title { font-size:1.1em ; color:#000; line-height: 1.5;}
.pro_std {font-size:1em; color:#888; line-height: 1.2;padding: 10px;}
.pro_price {font-size:1.1em; color:#ff0000; line-height: 1.1; padding-top: 10px;}

This is the css I used.

html html5 css

2022-09-22 21:29

1 Answers

When you make a cardui using li, you have to adjust the height of both width and height to be the same. In addition, you were asked to change the border value when hover, but border can affect the width and height of the element, so I don't want to recommend changing the border value when hover. Rather, it would be better to use background-color/box-shadow/transform etc.

http://jsfiddle.net/zjzn83xv/2/


.page_title {text-align: center; font-size:1.4em; line-height: 90px; background:#eee; border-top:1px solid #ddd; border:1px solid #eee; }
.page_wrap {width: 80%; margin: 0 auto; padding-top: 20px; height: auto;}


/* ▼▼▼▼▼ Start modifying your style here ▼▼▼▼▼ */
.span3 {
    display: inline-block;
    width: 200px; /* The height and width must be the same. Don't put the figure at %. I think the absolute value is good. */
    height: 400px;
    transition: 0.5s; /* The change is smooth. */
    Vertical-align: top; /* li The elements fit the upper line. */
}

.span3:hover {
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 10px white;
    Transform:scale (1.1); /* hover magnifies the element slightly. */
    -webkit-transform:scale (1.1);/* chrome */
    -moz-transform:scale(1.1);/* FireFox */
    -o-transform:scale(1.1);/* Opera */
    background-color: white; 
}

.span3 a {  text-align: center;   }

.span3 a img {
    display: block; 
    width: 100%; /* already filled area. */
    height: auto; /*The height is automatically adjusted to the horizontal. */
}
/* ▲▲▲▲▲ From here ▲▲▲▲▲ */


.pro_title { font-size:1.1em ; color:#000; line-height: 1.5;}
.pro_std {font-size:1em; color:#888; line-height: 1.2;padding: 10px;}
.pro_price {font-size:1.1em; color:#ff0000; line-height: 1.1; padding-top: 10px;}

2022-09-22 21:29

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656