There is a block in which there is an image, title and description. How to make it so that when you hover over the block, the picture changes to another, and when you click on the block, the new picture changes?
Only CSS and HTML , without scripts.

 .cards { display: table; margin-top: 45px; } .card { width: 300px; text-align: center; display: table-cell; vertical-align: bottom; height: 100%; position: relative; } .card-mg { width: 10%; height: 100%; } .card-padding { height: 100%; padding: 0 5% 0 5%; } .card .img { width: 100%; height: 220px; background-repeat: no-repeat; background-size: cover; background-position: center center; } .card1 .img { background-image: url(https://i.stack.imgur.com/PPzLT.jpg); } .card h1 { font-weight: 300; margin: 5% 0 5% 0; } .card h4 { font-weight: 100; } 
 <div class="cards"> <div class="card card1"> <div class="img"> </div> <div class="card-padding"> <h1>HEADING</h1> <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, praesentium.</h4> </div> </div> </div>

  • Only if input: checked - Air
  • @Air, can you please an example? ( - Vova Terentev
  • @Air, Yes, I understand, I know JS, but I need it without JS. I would have done so without question ((( - Vova Terentev

1 answer 1

Consider that the pictures change beautifully and do not stretch and look normal, all three different pictures must be the same size

 .cards { display: table; margin-top: 45px; } .card { width: 300px; text-align: center; display: table-cell; vertical-align: bottom; height: 100%; position: relative; } .card-padding { height: 100%; padding: 0 5% 0 5%; } .card h1 { font-weight: 300; margin: 5% 0 5% 0; } .card h4 { font-weight: 100; } label { display: block; width: 100%; height: 220px; background-repeat: no-repeat; background-size: cover; background-position: center center; background-image: url(http://discoverbath.com/wp-content/uploads/2016/01/photo-cascades-golf.jpg); transition: background .3s; } label:hover { width: 100%; height: 220px; background-repeat: no-repeat; background-size: cover; background-position: center center; background-image: url(https://fsa.zobj.net/crop.php?r=MdpN4yKJjYB3f7zU024ZnxUSiyf1pnsYBLCVFtIq4sm05-0muXgCH66x2RDuMWf3mHLZHrLoGn5jITRaNtVqyHcohCOSNB1FysLd05AqZ8S4mbktSxPriIRsL_b6_D05VuZOn-Y_Mj-Mn0l4qz8EvvEHQhlxvJy4kZWmQA); } input { position: absolute; opacity: 0; } input:checked~label { width: 100%; height: 220px; background-repeat: no-repeat; background-size: cover; background-position: center center; background-image: url(http://snipeclass.ru/wp-content/uploads/2016/01/%D0%A1%D0%BE%D1%87%D0%B8%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BD%D0%B0-%D1%82%D0%B5%D0%BC%D1%83-%D0%9C%D0%BE%D1%8F-%D1%80%D0%BE%D0%B4%D0%B8%D0%BD%D0%B0-300x220.jpg); } ; .cards { display: table; margin-top: 45px; } .card { width: 300px; text-align: center; display: table-cell; vertical-align: bottom; height: 100%; position: relative; } .card-padding { height: 100%; padding: 0 5% 0 5%; } .card h1 { font-weight: 300; margin: 5% 0 5% 0; } .card h4 { font-weight: 100; } label { display: block; width: 100%; height: 220px; background-repeat: no-repeat; background-size: cover; background-position: center center; background-image: url(http://discoverbath.com/wp-content/uploads/2016/01/photo-cascades-golf.jpg); transition: background .3s; } label:hover { width: 100%; height: 220px; background-repeat: no-repeat; background-size: cover; background-position: center center; background-image: url(https://fsa.zobj.net/crop.php?r=MdpN4yKJjYB3f7zU024ZnxUSiyf1pnsYBLCVFtIq4sm05-0muXgCH66x2RDuMWf3mHLZHrLoGn5jITRaNtVqyHcohCOSNB1FysLd05AqZ8S4mbktSxPriIRsL_b6_D05VuZOn-Y_Mj-Mn0l4qz8EvvEHQhlxvJy4kZWmQA); } input { position: absolute; opacity: 0; } input:checked~label { width: 100%; height: 220px; background-repeat: no-repeat; background-size: cover; background-position: center center; background-image: url(http://snipeclass.ru/wp-content/uploads/2016/01/%D0%A1%D0%BE%D1%87%D0%B8%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BD%D0%B0-%D1%82%D0%B5%D0%BC%D1%83-%D0%9C%D0%BE%D1%8F-%D1%80%D0%BE%D0%B4%D0%B8%D0%BD%D0%B0-300x220.jpg); } 
 <div class="cards"> <div class="card card1"> <input id="in" type="checkbox" /> <label for="in"></label> <div class="card-padding"> <h1>HEADING</h1> <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, praesentium.</h4> </div> </div> </div>