Create a dynamic webpage using HTML and CSS that utilizes hover effects to show and hide text and images

Struggling to find a way to achieve this inline. Normally, you would hide a child and target the parent for display...

<p class="demo_text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the text. All the </p>
<p class="text_toggle"> Keep Reading...</p>
<p class="text_hidden">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the</p>

In the CSS: it would be like

.text_hidden{
display: none
}
.text_toggle:hover .text_hidden{
display: block
}

This causes a break in the paragraph...

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage

Keep Reading...

of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Is there a way to remove the toggle text upon toggling and seamlessly flow the paragraph into one continuous piece like so...

******************* desired output below *************************************** There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the

The goal is to hide part of the paragraph on smaller screens < 900px, offering the option to keep viewing or not without disrupting the layout on screens > 900.

Any thoughts?

Answer №1

Encase all content within a paragraph element and utilize a span for elements with classes of .text_hidden and .text-toggle:

.text_hidden {
  display: none;
}

.text_toggle:hover+.text_hidden,
.text_hidden:hover {
  display: initial;
}
<p class="demo_text">
  There are numerous variations of passages from Lorem Ipsum accessible, although the majority have encountered modification in one way or another, by adding humor or random words that do not appear credible. If you plan to use Lorem Ipsum text, you must ensure there is no embarrassing content concealed within it. All the
  <span class="text_toggle"> Keep Reading...</span>
  <span class="text_hidden">There are many versions of Lorem Ipsum texts available, but most have been changed in some way, either through the insertion of jokes or random words that do not seem even remotely believable. Before you decide to apply any Lorem Ipsum text, make sure there's nothing awkward lurking in its midst.</span>
</p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using the "checked" attribute in an HTML input to hide content with CSS when blocks are positioned in different

Is there a way to connect input with buttons similar to the code below, or is it impossible without changing the HTML (unless using JS code)? Please don't critique the HTML code, this is just an example from a website, I'm trying to det ...

How come the background image is not being applied using ::before?

My goal is to have a background image for the body with content placed on top of it. I am using CSS to set the background image through the body selector with the ::before pseudo-element. However, the image does not show up in the background without settin ...

Position a <div> element in the center of another <div> element

Link to code: https://jsfiddle.net/z4udfg3o/ My goal is to center the "caixa" divs within the "produtos" div. Initially, I achieved this by using exact values with margin-left. However, I now want it to be responsive across different screen sizes, so I ha ...

What is the best way to generate a dynamic preview (including image and description) for a shared URL on various social media platforms, Gmail, and Skype using React JS?

We are currently working on a web app using React JS. Our goal is to have an image and a description show up when the link is shared on social media platforms as well as Skype. Currently, when the URL link gets shared, it only displays the URL itself lik ...

Error message: "An issue occurred: Unable to access undefined properties (specifically, borderRadius) in MUI react."

I recently created a navigation bar with an integrated search bar component. The styling for my search component was done using MUI styled from @emotion/styled in MUI library, where I applied a borderRadius: theme.shape.borderRadius. However, I encountere ...

Creating an active tab using Material UI on a particular route

I've encountered an issue with Material UI tabs and need help figuring out how to resolve it. I have a navbar with three different tabs that link to separate URLs, but two of them are quite similar. Take a look at my code snippet below: <Tabs indic ...

Tips on Incorporating Weather Icons into Your Weather App

I've integrated into my website to showcase weather icons. However, after adding the cdn link, the icons are not displaying correctly. The icon I'm trying to use has a class of "wi-wom-200" as listed on . This is essential because I am using ope ...

What is the best method for finding and observing the Javascript code being utilized on a webpage?

Is there a way to find and access specific Javascript used on a webpage? Imagine browsing through a webpage's source code and stumbling upon an element like this: <img border="0" alt="" onmouseout="hidetrail();" onmouseover="showtrail('imag ...

JavaScript prohibiting input prior to execution

Having trouble with executing this javascript before the user input, can anyone assist me in resolving this issue. I just want to create a simple html page with a textbox and a button. When the button is clicked, it should open a new window with a modifie ...

Center align for drop-down menu

I'm currently working on styling an asp:DropDownList element using custom CSS. I have successfully set the height, but I am facing a challenge with getting the text to align in the middle of the element rather than at the bottom. The vertical-align:mi ...

Concealing a div element within HTML using JavaScript Document Object

Can anyone assist me with hiding a div element using JavaScript in my game development project? I must be making an error somewhere, but I'm not sure what it is. Here is the code that I have: HTML: <div id="stats"> <table border="1"> ...

Trouble displaying image due to issues with javascript, html, Angular, and the IMDb API integration

I have been working on displaying images from the IMDb API in my project. Everything works perfectly fine when I test it locally, but once I deploy the project to a server, the images do not load initially. Strangely, if I open the same image in a new tab ...

Swap out HTML lists for a PHP array structure

For my assignment, I was tasked with creating an HTML list from an array and generating a drop-down menu based on another array. The requirement is that when a particular subject is selected from the drop-down menu, only that subject along with its teacher ...

a pair of liquid divs aligned next to each other

I am attempting to line up two fluid divs next to each other. You can see a preview of the current layout here. My goal is to have two flexible divs side by side. This is the code I currently have: .images { border: 1px solid red; position:absolute; ...

Is SimpleHTTPServer included in the package?

Lately, I've been experimenting with the Python SimpleHTTPServer in Mac OS X Bash instead of MAMP to assist with front-end templating. I appreciate its user-friendly nature, but I'm curious if there is a method to incorporate includes for repeate ...

Generating Speech from Text using jQuery API in HTML

Can a website be created to detect textbox text upon longClick by the user, and function across various browsers? The site should also have mobile compatibility. Appreciate any help! ...

Instructions on how to automatically play multiple video tags on one HTML page while also opening a modal

I'm working on an HTML page that needs to display two different videos in separate modals. My goal is to have each video start playing automatically when the play-video icon is clicked and the modal opens. I attempted this using the code snippet (vid ...

Creating a centered and beautifully styled picture with a specific maximum size using React

I recently completed the development of a new website, which can be viewed at Upon inspection of the website, it is evident that the photo is not centered and appears too large on mobile phones. Despite my efforts to align it using various methods outline ...

I aim to showcase particular cookies within an input field using jQuery

I am seeking a way to create a responsive page that showcases cookies. My goal is to have the output of a function automatically appear in the input value upon loading the page, instead of requiring a click event. Here is the code snippet I have been worki ...

Achieving the perfect scale for your background image using only CSS

I am currently working on a website, and the client has requested that the background scales up or down depending on the browser size. I have managed to achieve this partially using some jQuery hacks to adjust element sizes as the browser is resized, but I ...