If you notice the code snippet, you will see that a "read more" button appears. How can I add another "read more" button to align side by side? I may even want to include three "read more" buttons, each opening in a separate modal box.
If you notice the code snippet, you will see that a "read more" button appears. How can I add another "read more" button to align side by side? I may even want to include three "read more" buttons, each opening in a separate modal box.
Two read more button inline can be styled using the float property.
Add
.view a.info{
float:left;
}.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 1000px;
max-width: 90%;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
h1 {
color:green;
padding-left:10px
}
#hover {
color:rgba(188,175,204,0.9)
}
h2#testimonials {
color:#fffae3
}
div#all {
height: 90%;
width: 100%;
max-height: 900px;
display: flex;
overflow: overlay;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border-style: solid;
border-width: 1px;
background: #634c30
}
.view {
float:left;
border:5px solid #fff;
overflow:hidden;
position:relative;
text-align:center;
box-shadow:1px 1px 2px #e6e6e6;
cursor:default;
background:#fff url(../images/bgimg.jpg) no-repeat center center;
margin:10px
}
.view .mask,.view .content {
width:100%;
height:100%;
position:absolute;
overflow:auto;
top:0;
left:1px;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center
}
.view img {
display:block;
position:relative
}
.view h2 {
text-transform:uppercase;
color:white;
text-align:center;
position:relative;
font-size:25px;
font-family:Raleway, serif;
margin:20px 0 0;
padding:10px
}
.view p {
font-family:Merriweather, serif;
font-style:italic;
font-size:14px;
position:relative;
color:black;
text-align:center;
padding:0
}
.view a.info{
float:left;
text-decoration: none;
background: #000;
color: white;
font-family: Raleway, serif;
text-transform: uppercase;
box-shadow: 0 0 1px #000;
padding: 2px 10px;
margin: 4px;
}
.view a.info:hover {
box-shadow:0 0 5px #000
}
.view-tenth img {
width:650px;
height:200px;
transform:scaleY(1);
transition:all 3s ease-in-out
}
.view-tenth .mask {
background-color:rgba(255,231,179,0.3);
transition:all .5s linear;
opacity:0
}
.view-tenth h2 {
border-bottom:1px solid rgba(0,0,0,0.3);
background:transparent;
transform:scale(0);
color:green;
transition:all 3.5s linear;
opacity:0;
margin:20px 40px 0
}
.view-tenth p {
color:red;
opacity:0;
transform:scale(0);
transition:all 2.5s linear
}
.view-tenth a.info {
opacity:0;
transform:scale(0);
transition:all 4.5s linear
}
.view-tenth:hover img {
-webkit-transform:scale(10);
transform:scale(10);
opacity:0
}
.view-tenth:hover .mask {
opacity:1
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
transform:scale(1);
opacity:1
var people = new Array(); var individual = { first_name: "Padma", identification_number: 1, region: "India" }; people.push(individual); people.push([individual = { first_name: "Balaji", identification_number: 3, region: "India" }]); people. ...
An odd outline keeps appearing as I tab through elements on a website, but only in Firefox and not in Chrome, Safari, or Opera. To identify the element causing the focus, I used Firebug console by typing: document.activeElement. It showed: >>> d ...
Is there a way to either reduce the width of the slider's prev/next sides or remove these panels while keeping the arrows to cycle through slides? These elements appear to be within ul.flex-direction-nav. I attempted using ul.flex-direction-nav { dis ...
Currently, I am working on a project in Reactjs with Nextjs. To add CSS to my project, I have stored my CSS files in the 'styles' folder. In order to include them, I created a file called '_document.js' and implemented the following cod ...
Is it possible to dynamically change an image in the navigation bar based on the user's scroll position? For example, I want pic1 to be displayed when the page content is at the top, then switch to pic2 once the user reaches the footer, and then back ...
I am facing an issue with using an SVG as a background-image on a pseudo element. The image is not as tall as the container, so I would like to position it at the bottom of the container while having the background color fill up the top portion to create a ...
Is there a way to import all CSS files from a specific folder without having to import each file individually? Looking to import assets/css/* ? <link href="<?php echo base_url(); ?>assets/css/*" rel="stylesheet"/> <title&g ...
I currently have the following elements on my webpage: Table rows that contain radio buttons A link labeled "Issue" that triggers a popup with one submit button A submit button labeled "details" that also triggers a popup The issue I am facing is as fol ...
Currently, I am utilizing the slick slider from and I want to overlay text on top of the image. I tried using bootstrap carousel-caption, which works well with any image. However, with slick slider, it seems like the text is not at the highest level as I ...
First of all, here's a link to the problem on jsfiddle: jsfiddle.net The issue I'm facing is with a popover that contains html content including a button with the class "click_me". I've set up jQuery to listen for a click on this button and ...
Let's talk about an element that already has an animation set to trigger at a specific time: .element { width: 100%; height: 87.5%; background: #DDD; position: absolute; top: 12.5%; left: 0%; -webkit-animation: load 0.5s ease-out 5s bac ...
In my current view, I have integrated a react component as shown below: <Jumbotron> Lots of vital information </Jumbotron> I am looking to give this particular instance a unique style, like using a different background image. However, addin ...
Check out this jFiddle demonstrating the issue. Some of the Angular code may appear broken in the example, but that's just due to it being pasted into jFiddle; it's not an actual problem I'm facing. The CSS styles aren't working on the ...
I need assistance with my form that is supposed to input a name and phone number, fetch data from a MySQL database based on the input values, and display the results. However, when I execute the query using an onclick function, instead of retrieving data f ...
Visit this link to access the example in incognito mode. Click on the "open" button to open the sample signin form, then click on the "Sign Up" button to trigger the challenge. There seems to be an issue with using recaptcha inside a dialog. I'm not ...
Struggling to align a h1 element and p vertically in the middle of a left-floated div, but they end up next to each other aligned vertically. Seems like table-cell display is the culprit, but not sure how to achieve vertical alignment without it. The curr ...
I'm struggling to conceal a navigation element once the top of the #preFooter section is scrolled to. In order to make the nav element mobile-friendly, I have designed both the .tab-wrap and .tab-wrap-mobile. To enable these elements to slide away w ...
I'm currently working on integrating a third-party tool into our website. The tool requires the use of a form with the post method to send data to their site. Is there a way for me to replicate this action without relying on the form tag? I am not ver ...
Since the HTML is hosted on another server and I have no control over it, how can I use CSS to style certain list items? For example, The HTML on the server side: <ol> <li>Coffee</li> <li>Milk</li> <li>Orange Juice< ...
While attempting to build a single page application (SPA), I've encountered an issue with using the Grid component from material-ui. Normally, I rely heavily on the Grid, but in this new project, something seems amiss. The current problem is evident ...