Question

我需要像这里的鼠标悬停效果

但是当我在WP上实现它时我遇到了这个问题

如何在不破坏此WP的情况下实现此效果。

码

<div class=" block crystal c1s ce_text block" style="background-image:url();" data-location="">




        <img data-original="files/mo/img/box-teaser/behandlungen/brust-operationen/brustoperationen.jpg" title="Brustoperationen" alt="Brustoperationen - " class="lazy cover" />
    <noscript><img src="files/mo/img/box-teaser/behandlungen/brust-operationen/brustoperationen.jpg" title="Brustoperationen" alt="Brustoperationen - " class="cover" /></noscript>

    <div class="teaser-box">
        <div class="teaser-box-inside">
            <div class="teaser-box-bg"></div>
            <div class="teaser-content">
                <span class="teaser-content-inside">

                                        <h3>Brustoperationen</h3>



                    <p>Gewichtsschwankungen, Schwangerschaften, hormonelle Einflüsse und der natürliche Alterungsprozess verändern das Aussehen der weiblichen Brust und dadurch auch Ihr persönliches Wohlgefühl. Unsere Spezialisten für Plastische und Ästhetische Chirurgie sorgen dafür, dass Sie sich in Ihrer Haut wohlfühlen.</p>                                   
                </span>
            </div>
        </div>
    </div>

    <span class="more">»</span>

        <!--</a>-->



</div>

Answer 1

他们使用自定义的javascript / jQuery代码，但您可以使用CSS效果。

我从他们那里获取代码并稍微更改它并添加一个css转换。点击这里： https://jsfiddle.net/Bobo9/04axmg69/1/

CSS代码在这里：

* {
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Futura W01 Book",Tahoma,Arial,ArialMT,sans-serif;
    margin: 0;
    padding: 0;
}
div.block.crystal {
    min-height: 400px;
    height: auto;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background-position: center;
    -ms-background-size: cover;
    background-size: cover;
    width: 50%;
    position: relative;
}
div.block.crystal img {
    position: absolute;
    max-width: none;
    z-index: 0;
    width: auto;
    margin-left: -533.5px;
    left: 50%;
    height: 400px;
    margin-top: -200px;
    top: 50%;
}
div.block.crystal  .teaser-box {
    min-height: 400px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
div.block.crystal  .teaser-box  .teaser-box-inside {
    height: auto;
    top: 15px;
    left: 15px;
    bottom: 15px;
    right: 15px;
    overflow: hidden;
    position: absolute;
    width: auto;
}
div.block.crystal  .teaser-box  .teaser-box-inside .teaser-content-inside{
    background-color: rgba(0,144,189,.8);
    bottom: 0;
    height: 25%;
    left: 0;
    position: absolute;
    padding: 20px;
    width: 100%;
    transition: height 0.3s;
    -o-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -moz-transition: height 0.3s;
}
div.block.crystal:hover  .teaser-box  .teaser-box-inside .teaser-content-inside{
  height: 80%;
}
div.block.crystal  .teaser-box  .teaser-box-inside .teaser-content-inside h3{
    text-transform: uppercase;
    font-family: "Futura W01 Bold",Tahoma,Arial-Bold,Arial-BoldMT,sans-serif;
    font-size: 20px;
    height: auto;
    line-height: 1.4em;
    margin: 0;
    padding: 0 50px 0 0;
    text-transform: uppercase;
    font-weight: normal;
        max-height: 76px;
    min-height: 76px;
    overflow: hidden;
    transition: margin-top 0.3s;
    -o-transition: margin-top 0.3s;
    -ms-transition: margin-top 0.3s;
    -moz-transition: margin-top 0.3s;
}
div.block.crystal:hover  .teaser-box  .teaser-box-inside .teaser-content-inside h3{
  margin-top: 10%;
}
div.block.crystal  .teaser-box  .teaser-box-inside .teaser-content-inside p {
  font-family: "Futura W01 Book",Tahoma,Arial,ArialMT,sans-serif;
    font-size: 16px;
    padding: 20px 50px 0 0;
    text-transform: none;
    max-height: 128px;
    min-height: 128px;
    overflow: hidden;
}
div.block.crystal span.more {
    bottom: 25px;
    color: #fff;
    font-size: 3.2em;
    position: absolute;
    right: 40px;
    z-index: 100;
}

鼠标悬停对图像的影响

1 个答案: