How It Works
USE WIDTH CALC TO STOP THE RIGHTMOST IMAGE STUTTER WHEN IT TRANSITIONS
The links depend on percentages based off how many there are. For three links to display evenly would be 33% each. (Yet there is no css possible that would let the images default to 33% and then resize the rest of the time, so instead one image is set to be large by default - always the last one - so that the links can take up the full width of their container.) However when one grows to 50% of the space, the other two shrink to 25%.
The images are set to a specific pixel width, while the group is in percentages and has overflow:hidden set to hide the rest of the image. When the group expands on hover, more of the image is revealed.
To set a different number of images, the percentages would have to be recalculated.
The last image must always be the largest because css can only affect things that happen BEFORE itself in the html structure. Therefore only the last image can change depending on what happens to the other two.
The links depend on percentages based off how many there are. For three links to display evenly would be 33% each. (Yet there is no css possible that would let the images default to 33% and then resize the rest of the time, so instead one image is set to be large by default - always the last one - so that the links can take up the full width of their container.) However when one grows to 50% of the space, the other two shrink to 25%.
The images are set to a specific pixel width, while the group is in percentages and has overflow:hidden set to hide the rest of the image. When the group expands on hover, more of the image is revealed.
To set a different number of images, the percentages would have to be recalculated.
The last image must always be the largest because css can only affect things that happen BEFORE itself in the html structure. Therefore only the last image can change depending on what happens to the other two.
This can be edited to apply to any other image content type as well, such as lists and photos.
Link Image
width: 50%!important;
URL Link
.style-10305 li.group:last-child {width:50%;}
Link Image
min-width: 600px;
min-height: 600px;
margin: 0;
max-width: initial!important;
position: absolute;
top: -10%;
Group
Group :Hovermin-height: 600px;
margin: 0;
max-width: initial!important;
position: absolute;
top: -10%;
Group
width: -moz-calc(25% - 5px);/*FF*/
width: -webkit-calc(25% - 5px);/*webkit*/
width: calc(25% - 5px);
margin-left: 3px;
display: inline-block;
position: relative;
-webkit-transition: width 0.75s ease-out;
-moz-transition: width 0.75s ease-out;
-o-transition: width 0.75s ease-out;
transition: width 0.75s ease-out;
overflow: hidden;
height: 300px;
float: left;
width: -webkit-calc(25% - 5px);/*webkit*/
width: calc(25% - 5px);
margin-left: 3px;
display: inline-block;
position: relative;
-webkit-transition: width 0.75s ease-out;
-moz-transition: width 0.75s ease-out;
-o-transition: width 0.75s ease-out;
transition: width 0.75s ease-out;
overflow: hidden;
height: 300px;
float: left;
width: 50%!important;
URL Link
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
background-color: rgba(0,0,0,.6);
color: #fff;
width: 100%;
Custom CSS
bottom: 0;
left: 0;
padding: 10px;
background-color: rgba(0,0,0,.6);
color: #fff;
width: 100%;
Custom CSS
.style-10305 li.group:last-child {width:50%;}
.style-10305 li.group:nth-child(1):hover~li.group:last-child {width:calc(25% - 5px);width: -moz-calc(25% - 5px); width: -webkit-calc(25% - 5px);}
.style-10305 li.group:nth-child(2):hover+li.group:last-child {width:calc(25% - 5px);width: -moz-calc(25% - 5px); width: -webkit-calc(25% - 5px);} /*must be after in doc tree*/
.style-10305 li.group:nth-child(2):hover+li.group:last-child {width:calc(25% - 5px);width: -moz-calc(25% - 5px); width: -webkit-calc(25% - 5px);} /*must be after in doc tree*/