Changing image on hover (with columns)

Question

I've got four columns (25% width each) that take up 100% width and height of the screen. The idea is to have one image associated with each column, and when a user hovers over each column, the image changes to correspond with the text/icon in the column (the image itself should take up 100% width/height).

Is something like this possible with only HTML + CSS? I'm assuming I'd need some JS.

So far, I've got it set up where everything 'works', except for the image spanning across all of the columns. I've tried changing:

.col:hover { width: 100%; }

This seems to work okay for the first column, but the others flicker and glitch upon hover.

Check out the code below (I'm just using color blocks as images for now) / Or view on CodePen here: https://codepen.io/sdorr/pen/VqLzBQ

<!doctype html>
            <head></head>
            <body>
                <div class="container">
                    <a class="button" href="#">learn more</a>
                    <div class="col col-1">
                        <div class="vertical-align">
                            <h1 class="hero-text">data</h1>
                        </div>
                    </div>
                    <div class="col col-2">
                        <div class="vertical-align">
                            <h1 class="hero-text">intelligence</h1>
                        </div>
                    </div>
                    <div class="col col-3">
                        <div class="vertical-align">
                            <h1 class="hero-text">experience</h1>
                        </div>
                    </div>
                    <div class="col col-4">
                        <div class="vertical-align">
                            <h1 class="hero-text">activation</h1>
                        </div>
                    </div>
                </div>
            </body>

            <style>
            * {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            }

            .container {
                width: 100%;
                height: 100vh;
                position: relative;
            }

            .col {
                display: inline;
                float: left;
                width: 25%;
                height: 100vh;
                background-color: red;
                position: relative;
                text-align: center;
                z-index: 0;
                overflow: hidden;
            }

            .button {
                padding: 20px 0;
                width: 100%;
                background-color: purple;
                color: #ffffff;
                text-decoration: none;
                text-align: center;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                z-index: 1;
            }

            .button:hover {
                background-color: orange;
            }

            .col-1:hover {
                background-color: pink;
            }

            .col-2:hover {
                background-color: blue;
            }

            .col-3:hover {
                background-color: green;
            }

            .col-4:hover {
                background-color: yellow;
            }

            .vertical-align {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 100%;
            }
            </style>
            </html>

score 0 · Answer 1 · answered Dec 11 '18 at 20:40

0

Use an image instead of a color, and get it to cover the whole element:

.col-1:hover {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: cover;
}

answered Dec 11 '18 at 20:40

Diodeus - James MacFarlane

112,730
33
157
176

So that works to cover the whole column, but what if I want the image to cover up all of the columns on hover? Then, if I hovered over a different column, the image would change in the same manner. – sdorr Dec 11 '18 at 20:45
You'd have to hard-code the sizes of the background images to match the size of the overall layout, and use some positioning tricks: background-size: 600px 400px; background-attachment: fixed; background-position: -50px 150px; (adjust to fit) – Diodeus - James MacFarlane Dec 11 '18 at 20:52

score 0 · Answer 2 · answered Dec 11 '18 at 20:50

0

.col-1:hover {
   background-color: pink;
   background-image: url(...);
   background-repeat: no-repeat;
   width: 100%
}

How about this? It works on my side.

https://codepen.io/progr4mm3r/pen/maJBda

answered Dec 11 '18 at 20:50

mdogu

1
1

See, this works for the first column - but try doing this for column 2 as well. It glitches out, at least on my end :/ – sdorr Dec 11 '18 at 21:11
`col-2:hover + .col + .col { background-color: blue;width: 0%; } .col-2:hover + .col {background-color: blue;width: 0%;}` This sets the relative columns' width to 0. I am trying to think of a better way, hope this leads somewhere. Might want to check here: https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered – mdogu Dec 11 '18 at 21:41

score 0 · Answer 3 · answered Dec 12 '18 at 19:14

I've made some good progress on this issue and figured I'd post where I'm at so far. There's definitely still some kinks that need to be worked out, but it's coming along nicely.

The concept came from Joshua Johnson

Check out the CodePen or the source code below:

<!doctype html>
            <head>
                <meta name="viewport" content="width=device-width, initial-scale=1.0">  
            </head>
            <body>
                <div class="container">
                    <nav>
                        <ul>
                            <div class="col">
                                <li>
                                    <a href="#">data</a>
                                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGTVf63Vm3XgOncMVSOy0-jSxdMT8KVJIc8WiWaevuWiPGe0Pm">
                                </li>
                            </div>
                            <div class="col">
                                <li>
                                    <a href="#">intelligence</a>
                                    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
                                </li>
                            </div>
                            <div class="col">
                                <li>
                                    <a href="#">experience</a>
                                    <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
                                </li>
                            </div>
                            <div class="col">
                                <li>
                                    <a href="#">activation</a>
                                    <img src="https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg">
                                </li>
                            </div>
                        </ul>
                    </nav>
                    <img src="https://helpx.adobe.com/nz/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg">
                </div>
            </body>

            <style>
            * {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            }

            body {
                background: #333;
            }

            .col {
                width: 24.9%;
                height: 100vh;
                float: left;
                display: inline;
                border-right: 1px dashed #ffffff;
                text-align: center;
            }

            .col:last-child {
                border-right: none;
            }

            .container {
                position: relative;
                overflow: hidden;
                width: 100%;
                height: 100vh;
            }

            .container img {
                position: absolute;
                top: 0;
                left: 0;
                z-index: -60;
                width: 100%;
                height: 100vh;
            }

            .container li img {
                position: absolute;
                top: 0;
                left: 100%;
                z-index: -50;
                /*transition: all 1s ease;*/
                width: 100%;
                height: 100vh;
            }

            nav {
                width: 100%;
                height: 100vh;
            }

            ul {
                width: 100%;
                height: 100vh;
                list-style: none;
                text-align: center;
            }

            li {
                width: 100%;
                height: 100vh;
                display: flex;
                padding-top: 100px;
            }

            li a {
                z-index: 1;
                color: #ffffff;
                text-decoration: none;
                font-size: 36px;
                width: 100%;
                height: 100vh;
            }


            li a:hover + img {
                left: 0;
            }
            </style>

            <script type="text/javascript">
            </script>
            </html>

Changing image on hover (with columns)

3 Answers3