Question

Issue:
I have a responsive design and a 2 column set of links. Each set of links is a list. They are aligned center. When you hover there is an arrow that is supposed to appear next to the text, but I’m having trouble fluidly positioning it. The best I’ve come up with absolutely positioning the arrow on hover so it “works” with all of the my list items. It looks like crap though. I’d like it to be to the left of each of the h3 in each list. I just haven’t figured out a clever way of doing it.

<div class="contentLeft">
        <ul class="ca-menu">
            <li>
                <a href="#">
                    <div class="ca-content">
                        <h3 class="ca-main"><img src="<?php bloginfo('template_url') ?>/images/arrow-hover.jpg" class="arrow" width="61" height="29" alt="Arrow Hover">This is the link</h3>
                        <p class="ca-sub">This is the subheading</p>
                    </div>  
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="ca-content">
                        <h3 class="ca-main"><img src="<?php bloginfo('template_url') ?>/images/arrow-hover.jpg" class="arrow" width="61" height="29" alt="Arrow Hover">This is the link</h3>
                        <p class="ca-sub">This is the subheading</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="ca-content">
                        <h3 class="ca-main"><img src="<?php bloginfo('template_url') ?>/images/arrow-hover.jpg" class="arrow" width="61" height="29" alt="Arrow Hover">This is the link</h3>
                        <p class="ca-sub">This is the subheading</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="ca-content">
                        <h3 class="ca-main"><img src="<?php bloginfo('template_url') ?>/images/arrow-hover.jpg" class="arrow" width="61" height="29" alt="Arrow Hover">This is the link</h3>
                        <p class="ca-sub">This is the subheading</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <div class="contentRight">
        <ul class="ca-menu">
            <li>
                <a href="#">
                    <div class="ca-content">
                        <h3 class="ca-main"><img src="<?php bloginfo('template_url') ?>/images/arrow-hover.jpg" class="arrow" width="61" height="29" alt="Arrow Hover">This is the link</h3>
                        <p class="ca-sub">This is the subheading</p>
                    </div>  
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="ca-content">
                        <h3 class="ca-main"><img src="<?php bloginfo('template_url') ?>/images/arrow-hover.jpg" class="arrow" width="61" height="29" alt="Arrow Hover">This is the link</h3>
                        <p class="ca-sub">This is the subheading</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="ca-content">
                        <h3 class="ca-main"><img src="<?php bloginfo('template_url') ?>/images/arrow-hover.jpg" class="arrow" width="61" height="29" alt="Arrow Hover">This is the link</h3>
                        <p class="ca-sub">This is the subheading</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="ca-content">
                        <h3 class="ca-main"><img src="<?php bloginfo('template_url') ?>/images/arrow-hover.jpg" class="arrow" width="61" height="29" alt="Arrow Hover">This is the link</h3>
                        <p class="ca-sub">This is the subheading</p>
                    </div>
                </a>
            </li>
        </ul>
        </div>

Here is my CSS:

    .arrow {
  display: none;
  width: 61px;
     }
.ca-menu li:hover .arrow {
  display: inline;
  width: 61px;
  position: absolute;
  top: 10px;

}
.ca-menu {
  margin-left: 0;
  padding-left: 0;
  z-index: 1;
}
.ca-menu li {
  height: 100px;
  overflow: hidden;
  position: relative;
  display: block;
  margin-bottom: 4px;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
}
.ca-menu li:last-child {
  margin-bottom: 0px;
}
.ca-menu li a {
  text-align: center;
  width: 100%;
  height: 100%;
  display: block;
  color: #333;
  position: relative;
  text-decoration: none;
}
.ca-content {
  height: 60px;
}
.ca-main {
  font-size: 26px;
  color: #666;
  margin-bottom: 10px;
  text-decoration: none;
  line-height: 29px;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
}
.ca-sub {
  color: #999 !important;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
}
.ca-menu li:hover .ca-icon {
  color: #e3721e;
  opacity: 0.8;
  text-shadow: 0px 0px 13px #fff;
}
.ca-menu li:hover .ca-main {
  opacity: 1;
  color: #e3721e;
  -webkit-animation: moveFromTop 300ms ease-in-out;
  -moz-animation: moveFromTop 300ms ease-in-out;
  -ms-animation: moveFromTop 300ms ease-in-out;
}
.ca-menu li:hover .ca-sub {
  opacity: 1;
  -webkit-animation: moveFromBottom 300ms ease-in-out;
  -moz-animation: moveFromBottom 300ms ease-in-out;
  -ms-animation: moveFromBottom 300ms ease-in-out;
  color: #333 !important;
}

Any help is appreciated. Thanks!

Answer 1

A quick fix for this is a -ve margin. Here is a working Live Demo. But you have to consider some things. If you assign height and width to your image, if that is not changing, and if you have already set it in your CSS, you need not put it along with <img>. Simply define image width and height in your CSS.