Hey Everyone!
Upon clicking (more) the image that’s originally in the minimized post get’s enlarged! It’s such a cool thing to me and I’d love to re-create this dynamic / hide show. I’m wondering if anyone has some insight on this.
I don’t have a working template to show yet, I’m already familiar with how to create hide / show interactions but there’s has an interesting element.
Example:
https://www.quora.com/topic/Design
When you click (more) the image expands. I’m just like HOWWW lol.
Nope, it gets replaced by its larger version, but if you want, with Webflow, you can make it morph from one size to another 
How does that sound? There will be a slight ifference in how you handle your content though. More likely, the body of your CMS item will be made of an RT and we can control individual elements in it. So make the image your teaser image and have it sit before the body of text of the item when deployed, you’ll keep your image changing effect anyway.
Teaser state
Node (full CMS item) state
Now it’s all about the interaction… the interaction, on clic of the more button, will do this:
Order of elements in html should be:
limited RT
teaser image
full RT
See where I go with this?
Oh yea! Awesome stuff @vincent 
thanks so much!
When I get home I’m going to give this a shot. Two question’s on the teaser state:
1: Do I need a separate RT for the tease state and the full RT in the CMS?
2: The image being displayed in the tease state is separate from the RT right?
No. You can just add two RT in the CMS Collection List Item and link them to the same field. You can limit the height of the first one to break the text, and use a custom code with the CSS property {text-overflow:ellipsis;} so you get an automatic ellipsis ("…") where the text breaks.
If you had to add a field, you would name this field “Teaser text” and craft a special short text for this need to prevent it to break. IMHO that’s better than having a text to overflow, but for as we’re talking about reproducing the Quora thing…
You’ll pay attention to give both RT fields the same paddings and margin, so that when one replaces the other, it’s seamless and doesn’t provoke a “jump” of the design.
Also I forgot to account for the “read more” link in my scenario, here is an update:
Yes, you wouldn’t be able to easily control an image in the RT (you could, with CSS custom code, target it to style it, with a CSS rule such as “target the next image inside the RT”, but you wouldn’t be able to target it with IX without advanced and counter productive JS). Anyway, having a CMS image field for a teaser image in an article-based site is really a good practice. It allows you to illustrate teasers.
So in the teaser mode, you have the image set at position absolute and you manually place it there, and in the full node view you change its position to static or relative and it goes back in the flow of elements, that is just before the RT. Don’t forget to select the image element, the one you’ll target with the IX, and give it Transition on position, in the Style tab. I don’t know if it’s really going to animate… I have to check a few things with IX2.
Oh, and you have to think about your structure. When you will click on read more, you don’t want all the teaser items of the page to unfold, so you have to somehow limit the interaction effect. You must be able to limit it to siblings of the trigger, which in our case is the case (“read more” is at the same level than your image and your Rts)
Awesome thanks for the help! I’ll link back the build tonight
Morning @vincent !
So here’s the build so far
https://preview.webflow.com/preview/quora?preview=c362d486fb26c9be12ecc4cc8c1d50f1
Feel free to clone / edit
Two problems I’ve run into:
1: Getting the text to wrap around the image - had to set it to relative to get the text to wrap, when set to absolute the text went beneath it.
2: Getting the image to fall in line with the text on expand. Not sure how to change it’s state from relative to auto with IX2
3: Getting the text to break, I set a height of 50px and also added the css eclipse but it didn’t do anything. I’m sure I did something wrong in there lol.
Side thought:
I’m pumped on how this is coming along and I’m excited to keep hacking on it. Would be super grateful if you could take a peek today and see where I’m going wrong in here, feel free to clone / edit
I gotta go to work now but will continue working on this when i get home!!
How do i change the alignment of the image when “more” is click? Having a hard time figuring that out
Ended up just creating hide / show on the image. and putting same image inside the rich text.
It’s a little weird because the image flashes before it disappears but it gets the job done!
Now just trying to figure out how to make the eclipse happen with CSS…
