₦airaland Forum

Hello webmasters.I just decided to build my first project with the knowledge of HTML and CSS I have garnered.

Now,I am building an e-fashion store where different fashion sections are displayed on the index page.I want any section I hover on to increase in height and width and go back to its original size when it is no more hovered on.
I grouped the various sections in a div tag with a class "sect".In each div tag contains a figure tag that houses the img tag and a figcaption tag to hold a description text of the image.

My problem:
I gave the "div.sect" selector a " :hover" pseudo-class with the property being an increment in size of the div.when I ran the code,I noticed it formed only a box outside the figure tag with a lot of white space inside it.The image size remained the same
.I tried putting the " :hover" on img alone,whenever I hover on the image alone,it increases in size but if I hover on the caption,there will be no effect.I even tried with the figure tag and different variations but all to no avail.

My question:
I know CSS is not a programming language but can't I nest the selectors like this or something related?:

if div.sect:hover {
width:***px;
height:***px;
--- img {
--- width:**px;
--- height:**px;
}
--- figcaption {
--- font-size:**px;
}
}

Meaning if div.sect gets hovered on,it should activate these specified properties


img 1:Section not hovered.
img 2:A hovered section.
img 3:The CSS rules.


modified:
Nairaland isn't making the indentation of the supposed nesting visible.So I replaced the spaces with dashes.

try this
div.sect:hover img { .... }

etoluw:
try this

div.sect:hover img { .... }

Thanks

But I don't know how that might be it because,I want to assign a property for that div too.
I.e
div.sect:hover{....}
How can I place the img in the above rule??

Drella:
Thanks

But I don't know how that might be it because,I want to assign a property for that div too.
I.e
div.sect:hover{....}
How can I place the img in the above rule??

use div.sect:hover for the div

etoluw:
use div.sect:hover for the div

It will only create a box around it,the image won't expand with it.
Check image 2 posted above.