locked
Title in a red background div with bottom arrow also background red and on the bottom list of pictures 3 by 3 all same height and wdith RRS feed

  • Question

  • User1991482975 posted

    Hi, i am looking to achive in css the following :

    I would love on the top a red box with inside a white title adn just on the center bottom of the div a kind of down arrow also in red backround

    and after just above a list of div with backround pictures 3 x3 same size height an width (250 x 250)

    also the picture are link and i was thinking to give a color on hover and put inside them a white title of the picture

    how to achive?

    Saturday, December 17, 2016 8:30 AM

Answers

  • User-707554951 posted

    Hi, grafic.web

    Based on your need, I make an sample.

    Following code for your reference:

    <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            .container {
                display: flex;
                justify-content: center;
            }
    
            .TitleDiv {
                ;
                background-color: red;
                height: 50px !important;
                width: 600px !important;
                text-align: center;
                padding-top: 10px;
            }
    
                .TitleDiv:after {
                    z-index: 100;
                    ;
                    top: 98.1%;
                    left: 50%;
                    margin-left: -10%;
                    content: '';
                    width: 0;
                    height: 0;
                    border-top: solid 35px red;
                    border-left: solid 30px transparent;
                    border-right: solid 55px transparent;
                }
    
            p {
                font-size: x-large;
                word-spacing: 3px;
                color: white;
                letter-spacing: 2px;
                ;
            }
    
            .PictureDiv {
                z-index: 50;
                width: 600px;
                height: 400px;
                background-color: cadetblue;
                margin-top: -3px;
            }
            .PictureTable{
                width:600px;
                height:400px;
                border-collapse:collapse;
            }
            .PictureTable,th,td {
        border: 1px solid black;
    }
           
            .puzzle1 {
                background-image: url(http://www.collectionhair.com/Content/UserCreations/2016-12-05-133958-f9449cea-129-650.JPG);
                width: 199px;
                height: 201px;
                background-position: -200px -100px;
       
            }
    
            .puzzle2 {
                background-image: url(http://www.collectionhair.com/Content/UserCreations/2016-12-06-132109-835d4935-20161203-180733-650.jpg);
                width: 199px;
                height: 201px;
                background-position: -200px -100px;    
            }
    
            .puzzle3 {
                background-image: url(http://www.collectionhair.com/Content/UserCreations/2016-12-13-130604-e2d975b0-sposa-650.JPG);
                width: 199px;
                height: 200px;
                background-position: -200px -100px;      
            }
    
        </style>
    
    
     <div class="container">
                <table>
                    <tr>
                        <td>
                            <div class="TitleDiv">
                                <p>Title To</p>
                            </div>
    
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="PictureDiv">
                                <table class="PictureTable">
                                    <tr>
                                        <td style="width: 20%; height: 200px;">
                                            <div class="puzzle1">
                                            </div>
    
                                        </td>
                                        <td style="width: 20%">
                                            <div class="puzzle2 ">
                                            </div>
    
    
                                        </td>
                                        <td style="width: 20%">
                                            <div class="thumbnail puzzle3 ">
                                            </div>
    
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Peter</td>
                                        <td>Griffin</td>
                                        <td>af</td>
                                    </tr>
                                    <tr>
                                        <td>Lois</td>
                                        <td>Griffin</td>
                                        <td>aa</td>
                                    </tr>
                                </table>
    
                            </div>
                        </td>
                    </tr>
                </table>
            </div>

    Output as below:


    Best Regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 19, 2016 8:06 AM