-1

I am working on an animated CSS3 image gallery where clicking on a picture will magnify the picture to a larger scale. However, I feel as though my initial CSS code to style the gallery before enlarging an image has enforced the width to remain the same. I have attempted to set the width on :focus parameter and custom :focus:nth-child parameters, and yet it stays the same width. I forgot to mention the height adjusts just fine with the desired px length given within the :focus method. You can find the source code on my Github Repository in the index.html file and stylesheets/image-gallery.css

My guess is that the .gallery a {... width:200px; ...} is the cause for the unchangeable width, however within the same method I am setting the height as well, so I am incredibly confused on why it is not adjusting to the desired width. Oh, and by the way, excuse the messy HTML and CSS coding, I am still in the building phase of the website and will tidy up the code later on down the road. Thank you very much for the help in advance, it will help me out a whole lot!

Bryce Hahn
  • 63
  • 1
  • 11
  • Please attempt to [create a minimal, complete, and verifiable example](http://stackoverflow.com/help/mcve). – 4castle Apr 12 '16 at 02:52
  • @4castle so it turns out the problem was within my secondary css sheet which was setting all images within the `main-content` div to not exceed a width of 100%. – Bryce Hahn Apr 14 '16 at 01:11
  • Ayy! I'm glad you found the problem. Feel free to post that as an answer and then accept it as the answer to your question. – 4castle Apr 14 '16 at 01:28

2 Answers2

0

like this

img{
  width: 200px;
  transition: all .2s linear;
  &:hover{
    width: 400px;
  }
}
<img src="http://www.placehold.it/200x200" alt="" />
j.limjinda
  • 128
  • 2
  • 6
-1

Have you tried something like width:400px !important;? The !important declaration helps you to easily override properties on your css rules.

Sergio Ortega
  • 21
  • 2