Question

我正在添加一个叠加div并且已经跟随了几个示例但似乎无法让它们工作。我基本上希望将原始占位符替换为叠加层。

 <ul class="tech">

            <li class="element_fade_in first" style="background-color:#e76f25;color:#fff;">

                <div><i class="fa fa-headphones"></i>
                <h5>CONTACT CENTRES</h5>
                <p>Our pioneering Customer Interaction Centre offering is the flagship of the Inter-Active Technologies brand</p>

                    <div class="products-overlay"> <div class="products-item">         
                            <a href="contact-centre-solutions.html" class="overlay">Find Out More about our comprehensive Contact Centre Solutions</a>
                    </div>             
                </div>     
            </li>

            <li class="element_fade_in" style="background-color:#1b3663;color:#fff;">
                <i class="fa fa-globe"></i>
                <h5>OFFSHORE SOLUTION</h5>
                <p>South Africa - National Outsourcing Association (UK) Offshoring Destination of the Year 2012 / European Outsourcing Association Offshoring Destination of the Year 2013.</p>                
            </li>

            <li class="element_fade_in last" style="background-color:#e76f25;color:#fff;">
                <i class="fa fa-user"></i>
                <h5>CUSTOMER INTERACTION MANAGEMENT</h5>
                <p>The imparting or exchaning of information by speaking, writing or using some other medium</p>                
            </li>
        </ul>
        <ul class="tech">           
            <li class="element_fade_in first" style="background-color:#1b3663;color:#fff;">
                <i class="fa fa-comments"></i>
                <h5>COMMUNICATIONS</h5>
                <p>Our pioneering Customer Interaction Centre offering is the flagship of the Inter-Active Technologies brand</p>                
            </li>

            <li class="element_fade_in" style="background-color:#e76f25;color:#fff;">
                <i class="fa fa-briefcase"></i>
                <h5>PROFESSIONAL SERVICES</h5>
                <p>Get to know your business. Identification and inerchange of best practises, analytical techniques, change management and technology implementations, strategy development, or operational improvement - our experts offer it all</p>                
            </li>

            <li class="element_fade_in last" style="background-color:#1b3663;color:#fff;">
                <i class="fa fa-certificate"></i>
                <h5>TRAINING</h5>
                <p>Bettering the performance of individuals and groups in your business. We offer bespoke solutions to meet your demand</p>                
            </li>

        </ul>

CSS：

    ul.tech {
    text-align:center;
}

ul.tech li {
    display:inline-block;
    width:320px;
    margin:-5px;
    padding:40px 30px;
    position:relative;
    overflow:hidden;
    height:200px;
    transition:all 0.3s ease 0s;
    -moz-transition:all 0.3s ease 0s;
    -webkit-transition:all 0.3s ease 0s;
    -o-transition:all 0.3s ease 0s;
}


ul.tech li:hover:before {
   content:"";
   position:absolute;
   top:0;
   right:0;
   border-width:0 25px 25px 0;
   border-style:solid;
   display:block; width:0; 
}

ul.tech li:first-child, ul.tech li:last-child {
    margin-left:0px;
}

ul.tech li:last-child {
    margin-right:0px;
}

ul.tech li i {
    font-size:40px;
    margin-top: 25px;
    transition:all 0.3s ease 0s;
    -moz-transition:all 0.3s ease 0s;
    -webkit-transition:all 0.3s ease 0s;
    -o-transition:all 0.3s ease 0s;
}

ul.tech li h5 {
    text-transform:uppercase;
    color:#ffffff;
    margin-top:10px;
    transition:all 0.3s ease 0s;
    -moz-transition:all 0.3s ease 0s;
    -webkit-transition:all 0.3s ease 0s;
    -o-transition:all 0.3s ease 0s;
}

ul.tech li p {
    font-size:13px;
    margin-top:10px;
    transition:all 0.3s ease 0s;
    -moz-transition:all 0.3s ease 0s;
    -webkit-transition:all 0.3s ease 0s;
    -o-transition:all 0.3s ease 0s;
}

ul.tech li:hover i {
    color:#fff;
}

ul.tech li:hover h5 {
    color:#fff;
}

ul.tech li:hover p {
    color:#fff;
    opacity:0.5
}

Answer 1

试试这个html：

<ul class="tech">
    <li class="element_fade_in first" style="background-color:#e76f25;color:#fff;">
        <div class="overlay"><i class="fa fa-headphones"></i>

             <h5>CONTACT CENTRES</h5>

            <p>Our pioneering Customer Interaction Centre offering is the flagship of the Inter-Active Technologies brand</p>
            <div class="products-overlay">
                <div class="products-item"> <a href="contact-centre-solutions.html" class="overlay">Find Out More about our comprehensive Contact Centre Solutions</a>

                </div>
            </div>
    </li>
    <li class="element_fade_in" style="background-color:#1b3663;color:#fff;">   <i class="fa fa-globe"></i>

         <h5>OFFSHORE SOLUTION</h5>

        <p>South Africa - National Outsourcing Association (UK) Offshoring Destination of the Year 2012 / European Outsourcing Association Offshoring Destination of the Year 2013.</p>
    </li>
    <li class="element_fade_in last" style="background-color:#e76f25;color:#fff;">  <i class="fa fa-user"></i>

         <h5>CUSTOMER INTERACTION MANAGEMENT</h5>

        <p>The imparting or exchaning of information by speaking, writing or using some other medium</p>
    </li>
</ul>
<ul class="tech">
    <li class="element_fade_in first" style="background-color:#1b3663;color:#fff;"> <i class="fa fa-comments"></i>

         <h5>COMMUNICATIONS</h5>

        <p>Our pioneering Customer Interaction Centre offering is the flagship of the Inter-Active Technologies brand</p>
    </li>
    <li class="element_fade_in" style="background-color:#e76f25;color:#fff;">   <i class="fa fa-briefcase"></i>

         <h5>PROFESSIONAL SERVICES</h5>

        <p>Get to know your business. Identification and inerchange of best practises, analytical techniques, change management and technology implementations, strategy development, or operational improvement - our experts offer it all</p>
    </li>
    <li class="element_fade_in last" style="background-color:#1b3663;color:#fff;">  <i class="fa fa-certificate"></i>

         <h5>TRAINING</h5>

        <p>Bettering the performance of individuals and groups in your business. We offer bespoke solutions to meet your demand</p>
    </li>
</ul>

然后这个CSS

body {
    font-family:'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 100px;
    font-size: 13px;
}
div {
    background: #fff;
    margin: 0 auto;
    width: 200px;
    padding: 100px;
    text-align: center;
    /* border-radius */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    /* box-shadow */
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
}
ul.tech {
    text-align:center;
}
ul.tech li {
    width:320px;
    margin:-5px;
    padding:40px 30px;
    position:relative;
    overflow:hidden;
    height:200px;
    transition:all 0.3s ease 0s;
    -moz-transition:all 0.3s ease 0s;
    -webkit-transition:all 0.3s ease 0s;
    -o-transition:all 0.3s ease 0s;
}
.overlay {
    position:absolute;
    top:0px;
    right:0px;
    transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    opacity:0;
}
ul.tech li:hover > .overlay {
    opacity:1;
    background:#000;
    top:0;
    right:0;
    border-width:0 25px 25px 0;
    border-style:solid;
    display:block;
    width:0;
}
ul.tech li i {
    font-size:40px;
    margin-top: 25px;
    transition:all 0.3s ease 0s;
    -moz-transition:all 0.3s ease 0s;
    -webkit-transition:all 0.3s ease 0s;
    -o-transition:all 0.3s ease 0s;
}
ul.tech li h5 {
    text-transform:uppercase;
    color:#ffffff;
    margin-top:10px;
    transition:all 0.3s ease 0s;
    -moz-transition:all 0.3s ease 0s;
    -webkit-transition:all 0.3s ease 0s;
    -o-transition:all 0.3s ease 0s;
}
ul.tech li p {
    font-size:13px;
    margin-top:10px;
    transition:all 0.3s ease 0s;
    -moz-transition:all 0.3s ease 0s;
    -webkit-transition:all 0.3s ease 0s;
    -o-transition:all 0.3s ease 0s;
}
ul.tech li:hover i {
    color:#fff;
}
ul.tech li:hover h5 {
    color:#fff;
}
ul.tech li:hover p {
    color:#fff;
    opacity:0.5
}

您可能需要进行一些调整（检查.overlay类），但这是使用您的代码执行此操作的良好起点。 See fiddle here

div的CSS叠加

1 个答案: