Question

我尝试做的是将自定义形状的边框放在内部带有不同图像的文章中，我需要它在悬停时更改形状（并显示带有框标题的段落）。我尝试了一些技巧，但他们没有工作，我没有想法如何让它发挥作用。该解决方案必须得到Chrome 17 +，Firefox 10 +，Safari 5 +，Opera 10.5 +，IE 9+的支持。请参阅下面的图片以便更好地理解：

你们有什么想法如何制作吗？也许它不应该通过使用边框来制作？也许有一个jQuery解决方案来做到这一点？以下是代码：http://codepen.io/tomaff/pen/XMBjKz（用SASS写的，所以我不确定是否可以将其发布到代码段内。

＆＃13;

@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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

当您将图像保持为div背景时，可以非常轻松地完成此操作。（预览：https://stackoverflow.com/a/24198314/7767733）

CSS（style.css）：

<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>

<强> 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>
...

当然，您需要根据需要使用jquery或其他lib在悬停时添加动画。

更新：不使用背景图片，您可以使用相同的技巧进行此次细微更改

<强> HTML：

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;
}

<强> CSS：

library("RColorBrewer")

HOLD <- matrix(c(0.80, 0.70, 0.70, 0.65, 0.56, 0.56, 0.78, 0.54, 0.40, 0.76, 0.23, 0.45), ncol=6, nrow=2)

colnames(HOLD) <- c("Infolettre", "Promotion", "Abonne", "Comédie", "Drame", "Suspense")
rownames(HOLD) <- c("D.T.", "F.T.")

HOLD

SEQUENTIAL <- brewer.pal(2, "PuBu")

par(mfrow=c(1,3))
barplot(HOLD[,1] * 100, main="Infolettre", ylab="%", ylim=c(0, 100), las=1,  col=SEQUENTIAL)
barplot(HOLD[,2] * 100, main="Promotion", ylab="%", ylim=c(0,100), las=1, col=SEQUENTIAL)
barplot(HOLD[,3] * 100, main="Abonne", ylab="%", ylim=c(0,100), las=1, col=SEQUENTIAL)

您可以找到更新的http://cssdeck.com/labs/cr9kfykv

在div中设置边框样式

1 个答案: