Rounded Image + aligned text possible?

  • Hi Everyone,

    I’ve been messing around with some css to try and set the images on my Website a little nicer. I’ve stumbled across a tutorial that shows how to turn square and rectangular images into round images through use of a new class in CSS. It’s all working fine, the only problem is I wanted my text to follow the rounded image contour. Is that possible? Any Suggestions? Thanks.

    This is the tutorial I followed: https://theme4press.com/create-rounded-images-wordpress/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Possible.

    Here’s a site under development. The image on the right is “circled” via CSS and the text more or less wraps to the circle.

    https://hab2.sterndata.com/

    Look at the last line of the CSS, below.

    .fi-circle img {
    float: right;
    border-radius: 50%;
    border-color: #fff;
    border-width: 6px;
    border-style: solid;
    margin-left: 1em;
    shape-outside: circle();
}
    Thread Starter mosufe

    (@mosufe)

    Perfect! That’s exactly what I was looking for Thanks ??

    Hm, don’t really like the method using in this tutorial…

    Better way to do it is to mix a div with 50% border-radius and the flex display.
    It’ll be easier to center your content inside the box.

    If you don’t want to got a streched image, you can use a background-image on the div and use the property of background-position (center) and background-size (cover).

    Also, if you realy want to keep an image for a SEO reason, you can manage that effect by position it with the same properties in the div, and a full height property (100%) and an auto width. And if you want to add text over it, just add an absolute span.

    Like this : https://codepen.io/anon/pen/EmVRRZ

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Rounded Image + aligned text possible?’ is closed to new replies.