CODEWITHSUNDEEP
htmlcss
MrDevRI
MrDevRI

Reputation: 243

Trouble getting images to take up whole container

I have some images in containers that are being a little bit weird. The images are not taking up the full container, and they don't seem to be centered correctly. I set the width and max-width to 100%. I posted a screenshot below of what it currently looks like, and what I am trying to accomplish. The code is below as well. Also, would anyone be able to give me any advice on how to achieve the filter effect the images have in the second picture? Any help is much appreciated!

What it currently looks like enter image description here

What I am trying to achieve: enter image description here

HTML:

<div class="opinion">
  <div class="wrap">
    <div class="atable">
      <?php query_posts(array('post_type' => array('community', 'projects'),'posts_per_page' => 4,'post_parent' => 0, 'post_status' => array('publish'), 'orderby' => 'menu_order date')); ?>
      <?php while (have_posts()) : the_post(); ?>
        <div class="acell">
          <div class="contentbox">
            <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID, 'issues'), 'large_size' );
            $url = $thumb['0']; ?>

            <ul class="slides">
              <li><a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title(); ?>"><?php the_post_thumbnail('issues'); ?><span><?php the_title(); ?></span></a></li>
            </ul>

          <!-- <a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title(); ?>"><?php the_post_thumbnail('issues'); ?><h3><?php the_title(); ?></h3></a> -->
          </div>
        </div>
      <?php endwhile; wp_reset_query(); ?>
    </div>
  </div>
</div>

CSS:

.opinion .atable .acell .contentbox {
position: relative;
}

.opinion .atable .acell .contentbox img {
  width: 100%;
  max-width: 100%;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  display: block;
  margin-bottom: 15px;
  position: relative;
}

.opinion .atable .acell .contentbox ul {
  list-style-type: none;
}

.opinion .atable .acell .contentbox ul li a {
  background-repeat: no-repeat;
  color: white;
  display: block;
  height: 200px;
  max-width: 350px;
  width: 350px;
}

.opinion .atable .acell .contentbox ul li a span {
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 10px 10px 20px 10px;
  color: #fff;
  z-index: 10;
  display: inline-block;
  font-size: 1.2em;
  text-shadow: 1px 1px 1px #000;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-left-radius: 4px;
}

Upvotes: 1

Views: 56

Answers (2)

steffcarrington
steffcarrington

Reputation: 404

To achieve the overlay effect on the images you could use some of the new CSS3 Filter properties, but browser support will be limited. There is another option using the :after pseudo element on the .slide li and absolute position it, give it a background colour with a lowered opacity like so...

.contentbox {
  position: relative;
}

.contentbox:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  height: 100%;
  width: 100%;
  background-color: #000; // Change this to the colour you want
  opacity: 0.3;
}

.slides li {
  position: relative;
  z-index: 100;
}

I hope this helps...

Upvotes: 2

Loz
Loz

Reputation: 121

For the image sizing try this:

.slide img {
width:100%;
height:auto;
}

For the filter effects try something like this CSS3 (you will need to add different classes to the li element if you want different effects for each slide):

-webkit-filter: grayscale(0.5) hue-rotate(40deg);

Upvotes: 2

Related Questions