CSS transition class width on hover

Question

I'm trying to use pure css to alter the widths of my classes on hover.

So far the transition is working with regard to altering the classes, but class .b and .c are not affecting the width of the classes that come before them. I need the previous class (i.e. class .a) to contract when hovering on class .b

I posted the code below and hopefully someone has a solution that ideally contains only CSS.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}




.column {
  float: left;
  width: 33.33%;
  height:100%;
}

.a{
    background-color: #ff0000;
    transition: 0.3s;
}
.a:hover{
    background-color: #c41333;
    width:40%;
}

.a:hover ~ .b, .c{
    width:30%;
}

.b{
    background-color: #eeeeee;
    transition: 0.3s;
}

.b:hover{
    background-color: #c41333;
    width:40%;
}

.b:hover ~ .a, .c{
    width:30%;
}

.c{
    background-color: #cccccc;
    transition: 0.3s;
}

.c:hover{
    background-color: #c41333;
    width:40%;
}

.c:hover ~ .a, .b{
    width:30%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

<!--<head>
    <link rel="stylesheet" href="style.css" />
</head>-->

<div class="row">
    <div class="column a">
        <p>tester</p>
    </div>
    <div class="column b">
        <p>tester</p>
    </div>
    <div class="column c">
        <p>tester</p>
    </div>
</div>

Thanks for your help.

Did you forget to include a link to the fiddle? – Soc Sep 12 '19 at 07:08 — Soc, Sep 12 '19 at 07:08
Edited: I just posted the code instead. – Aaron Lee Sep 12 '19 at 07:09 — Aaron Lee, Sep 12 '19 at 07:09

score 0 · Answer 1 · answered Sep 12 '19 at 07:17

0

Fiddle: https://jsfiddle.net/kawal/ygn8fk17/7/

.box {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  transition: width 0.2s ease-out;

}

.box:hover {
  width: 200px
}

answered Sep 12 '19 at 07:17

Kawaljit Singh

190
1
6

This doesn't contract the sizes of the other classes. – Aaron Lee Sep 12 '19 at 07:20

score 0 · Answer 2 · answered Sep 12 '19 at 07:21

0

You can use flexbox to do this. You only change the width of the element currently hovered and it's siblings adapt to it.

.row {
  display: flex;
}

.col {
  background: red;
  width: 33.33%;
  height: 50px;
  transition: width 0.3s ease-in-out;
}
.col:nth-child(even) {
  background: green;
}

.col:hover {
  width: 50%;
}

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

answered Sep 12 '19 at 07:21

Furkan Poyraz

672
1
4
14

I think this is a better way. – Prakash Rajotiya Sep 12 '19 at 07:27
This is working pretty well in terms of the widths, but when hovering over the 3 col, it's forcing the page width too wide it seems and is glitching between being in place and falling under the other cols. – Aaron Lee Sep 12 '19 at 07:28

score 0 · Accepted Answer · answered Sep 12 '19 at 07:25

How about this instead? https://jsfiddle.net/jtnxL7cz/

.column {
  float: left;
  width: 33.33%;
  height:100%;
  transition: 0.3s;
}

.row:hover .column {
  width: 30%;
}

.row:hover .column:hover {
  width: 40%;
}

.a{
  background-color: #ff0000;
}

.b{
  background-color: #eeeeee;
}

.b:hover{
  background-color: #c41333;
}

.c{
  background-color: #cccccc;
}

.c:hover{
  background-color: #c41333;
}

CSS transition class width on hover

3 Answers3