Feature page image

  • Hello,

    Is it possible to make the image become bigger with the feature page image?

    As you know the feature image space gets bigger when you hover over it… but when I put a picture there, it just cuts the picture and then when you hover over it, it shows full image.

    I want the full image to be shown and then get bigger?

    Thanks

Viewing 1 replies (of 1 total)

  • The way it works is that you have an underlying image that must be 270×250 for it not to be cut off. The border — which is initially very much encroaching into the middle of the image — allows you to see a small part of the image. When you hover, the border zooms out to reveal the rest of the underlying image. This is controlled by the following CSS:

    .widget-front.hover .round-div,
article.hover .round-div {
  -webkit-transform: scale(1.4);
  -moz-transform: scale(1.4);
  -ms-transform: scale(1.4);
  -o-transform: scale(1.4);
  transform: scale(1.4);
}

    You could remove the border completely and make the image itself scale. But the image would be square at that point, of course.

    The full solution to what you want to achieve would involve editing your 3 images so that they are circular with a transparent background, then editing the CSS to make the images themselves scale up when hovered.

    Come to think of it, that’s not a bad idea ?? Especially for those with patterned backgrounds (Joe the Baker, are you around?).

Viewing 1 replies (of 1 total)
  • The topic ‘Feature page image’ is closed to new replies.