在div内设置边框样式
[英]Styling the border inside div
问题描述
What I'm trying to do is to put the border with the custom shape inside articles with different images inside, and I need it to change the shape (and show the paragraph with box caption) while on hover. 
我想做的是将带有自定义形状的边框放在带有不同图像的文章中，在悬停时我需要它来更改形状（并显示带有框标题的段落）。 I've tried some tricks but they didn't work and I'm out of ideas how to make it work. 我尝试了一些技巧，但它们没有起作用，我不知道如何使之起作用。 The solution has to be supported by Chrome 17+, Firefox 10+, Safari 5+, Opera 10.5+, IE 9+. Chrome 17 +，Firefox 10 +，Safari 5 +，Opera 10.5 +，IE 9+必须支持该解决方案。 See the picture below for better understanding: 请参阅下面的图片以获得更好的理解：
Do you guys have any ideas on how to make that? 你们对如何做到这一点有什么想法吗？ Maybe it shouldn't be made by using border? 也许不应该使用边框来制作？ Maybe there is a jQuery solution to do that? 也许有一个jQuery解决方案可以做到这一点？ Here's the code: http://codepen.io/tomaff/pen/XMBjKz (It's written with SASS so I'm not sure if I can post it inside a snippet. 这是代码： http : //codepen.io/tomaff/pen/XMBjKz （它是用SASS编写的，所以我不确定是否可以将其发布到摘要中。
@mixin clearfix { &:after { content: ""; display: table; clear: both; } } html, body { margin: 0; } .pictures-section { background-color: hotpink; padding: 2em 0; } .pictures-wrapper { max-width: 1170px; margin: 0 auto; @include clearfix; article { position: relative; overflow: hidden; width: 23%; height: 480px; background-color: honeydew; margin: 0 1%; float: left; &:before { content: ""; border: 20px solid white; } &:first-child { border-top: 8px solid blue; } &:nth-child(2) { border-top: 8px solid green; } &:nth-child(3) { border-top: 8px solid crimson; } &:last-child { border-top: 8px solid yellow; } @media only screen and (max-width: 1170px) { width: 49%; height: 220px; margin: 0.5% 0.5%; } } img { display: block; height: 100%; width: auto; position: absolute; @media only screen and (max-width: 1170px) { height: initial; } } } #pictures-img1 { left: -520px; @media only screen and (max-width: 1170px) { left: -900px; top: -300px; } } #pictures-img2 { left: -320px; @media only screen and (max-width: 1170px) { top: -45px; left: -340px; } }
<section class="pictures-section"> <div class="pictures-wrapper"> <article> <img src="http://www.sipsala.com/wp-content/uploads/2016/02/Basics-of-Photography-for-Beginners-SipSala-Sri-Lanka.jpg" alt="woman" id="pictures-img1"> <p>Box caption</p> </article> <article> <img src="https://stocklandmartelblog.files.wordpress.com/2015/07/martin-sigal_nike-6.jpeg" alt="nike campaign photo" id="pictures-img2"> <p>Box caption</p> </article> <article> <img src="http://www.sipsala.com/wp-content/uploads/2016/02/Basics-of-Photography-for-Beginners-SipSala-Sri-Lanka.jpg" alt="woman" id="pictures-img3"> <p>Box caption</p> </article> <article> <img src="https://stocklandmartelblog.files.wordpress.com/2015/07/martin-sigal_nike-6.jpeg" alt="nike campaign photo" id="pictures-img4"> <p>Box Caption</p> </article> </div> </section>
1 个解决方案
解决方案1
0 2017-03-25 23:46:18
This can be done quite easily when you keep the images as a div background. 将图像保留为div背景时，可以很容易地做到这一点。 (Preview: http://cssdeck.com/labs/cr9kfykv ) （预览： http : //cssdeck.com/labs/cr9kfykv ）
CSS (style.css): CSS（style.css）：
body {
background: #cdcdcd;
}
div.pictures-wrapper {
max-width: 220px;
display: block;
background: #ffffff;
position: relative;
padding: 10px;
}
div.pictures-wrapper article {
background: #fff;
max-width: 220px;
z-index: 5;
}
div.pictures-wrapper article:hover .image-holder {
background-repeat: no-repeat;
border-radius: 50%;
width: 200px;
height: 200px;
}
div.pictures-wrapper article:hover > p {
display: block;
}
div.pictures-wrapper article div.image-holder {
max-width: 200px;
padding: 10px;
height: 200px;
background-size: 100% 100%;
background-image:url('http://www.sipsala.com/wp-content/uploads/2016/02/Basics-of-Photography-for-Beginners-SipSala-Sri-Lanka.jpg');
}
div.pictures-wrapper article p {
text-align: center;
padding: 0 10px 5px 10px;
display: none;
}
HTML: HTML：
<head>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<section class="pictures-section">
<div class="pictures-wrapper">
<article>
<div class="image-holder"></div>
<p>Box caption</p>
</article>
</div>
</section>
</body>
</html>
Of course you'll need to add an animations on hover using jquery or other lib as you like. 当然，您需要根据需要使用jquery或其他lib在悬停时添加动画。
UPDATE: Without using background image you can use the same tricks with this minor changes
HTML: HTML：
...
<article>
<img class="image-holder" src="http://www.sipsala.com/wp-content/uploads/2016/02/Basics-of-Photography-for-Beginners-SipSala-Sri-Lanka.jpg" />
<p>Box caption</p>
</article>
...
CSS: CSS：
body {
background: #cdcdcd;
}
div.pictures-wrapper {
max-width: 220px;
display: block;
background: #ffffff;
position: relative;
padding: 10px;
}
div.pictures-wrapper article {
background: #fff;
max-width: 220px;
z-index: 5;
}
div.pictures-wrapper article:hover .image-holder {
background-repeat: no-repeat;
border-radius: 50%;
width: 200px;
height: 200px;
}
div.pictures-wrapper article:hover > p {
display: block;
}
div.pictures-wrapper article img.image-holder {
max-width: 200px;
padding: 10px;
height: 200px;
background-size: 100% 100%;
}
div.pictures-wrapper article p {
text-align: center;
padding: 0 10px 5px 10px;
display: none;
}
You can find updated fiddle here 你可以在这里找到更新的小提琴
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.